eclipseIzHere eclipseIzHere - 2 months ago 15
jQuery Question

Overscroll not working right way and div not displaying whole.

So i have a div that is supposed to be the black part of this image:
image

but the div is the white stripe on the top part of the window instead. and when i enter a command and something pops up, the div expands as i go. like this:
enter image description here

i have overflow:scroll on the div as css, but after i enter enough commands, the overflow doesn't work as it should, like this:
enter image description here

it expands below the footer and where i enter my command (the white stripe on the bottom.)

so my question is how do i make the div as big as the black part and how to fix the overflow problem (the extra text only shows above the footer and where i enter commands. here is my code:

here
https://jsfiddle.net/qb5xaw3c/

Answer

Try using flex

body { display: flex; }
#targetDiv { flex-glow: 90; overflow: auto; }
footer { flex-glow: 10; }

Cannot test without exact JavaScript, here is the JsFiddle: https://jsfiddle.net/Zay_DEV/qb5xaw3c/1/

The problem is that you didn't define any height for body or #main, and if you do so, you should use overflow: auto; to allow the browser decide show the scroll bar or not. Also I don't think make a .main for footer is a good idea (semantics matter)

Edit 1 -

Sorry it shouldn't use the flex, just a simple calc would solve it

html, body { margin: 0; padding: 0; min-height: 100vh; }
footer { height: 100px; }
#targetDiv { height: calc(100vh - 100px - 30px); }

Try: https://jsfiddle.net/Zay_DEV/3g88ugzd/1/

You still have to define the height of #targetDiv explicitly to make the overflow happens. It is not working with % height.