html - How to avoid one DIV overflowing the other? -


hello have following code (jsfiddle)

    #statements {   position: relative;   top: 0;   bottom: 0;   height: 100vh;   background-color: rgba(200, 200, 200, 0.4);   max-width: 340px;   padding-left: 50px;   z-index: 1; }    #entries {   position: relative;   height: 60%;   max-width: inherit;   overflow: scroll; }  #entryform {   position: fixed;   height: 300px;   bottom: 0;   background-color: rgba(200, 200, 200, 0.8);   width: 340px; } 

and

<div id="statements">   <div id="entries">entry</div>   <div id="entryform">entryform</div> </div> 

my problem cannot make entries stop before entryform starts (also should responsive browser height).

any idea how make entries not overflow entryform div?

thanks!

entryform has position:fixed... means removed 'flow' of document. causes entries not effect entryform .

to entryform below of entries, add height: 40% entryform .


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -