100% height div and overflow:auto

Question

Hello. I have got a vertical menu on the left side of the screen, and i want to take 100% height of the resolution, but if the div(of the menu) needs more, i want to appear scroll. My question: I have got one div with height:100% and overflow auto. I need have the scroll only on that div, but this div must be 100% of the resolution of the screen. Now if i put like this, the scroll takes all the page, but if i put fixed height to the div it works correctly. But i need to be 100% height. Thank you very much!

Answer 1

I know of 2 common solutions to this:

1) Use JavaScript to determine the height of the viewport and explicitly set the height of the element to the same (e.g. something along the lines of yourMenuDivElement.style.height = document.documentElement.clientHeight;. You'd also have to make sure to capture the window resize event to reset the height of the menu if the window height changes.

2) The much simpler CSS-only solution is to set the height of the html and body elements to both be 100%. I believe this generally works OK, though you may have other things on your page that could be negatively affected by setting the document height to 100% perhaps - but it's definitely worth trying it. CSS would be something like:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
div#menu {
    height: 100%;
    overflow: auto;
}