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 .