100% height div and overflow:auto

Question

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

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;
}