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

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:

    

        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
        
owepwew
    
                              

Css:

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