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

http://cssdesk.com/yxShB http://gearsdigital.com/sandbox/ http://jsfiddle.net/WB4Qc/

Successfully tested in:

OSX

• FF 3.6
• Safari 4 + 5
• Chrome 47.0

WIN7

• IE 7
• IE 8
• FF 3.5

See my example above. The code works fine... Try to resize the window. You'll see once the bottom of the browser reaches the last list element an scrollbar appears on the menu div.

Html:

<div id="menu">
    <ul>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
    </ul>
</div>                              

Css:

    * {margin:0;padding:0;}
    html, body{
        height:100%;
        background:#eee;
    }
    #menu {
        background:#ccc;
        width:220px;
        height:100%;
    }
    #menu ul {
        height: 100%;
        overflow: auto;
    }