css - 100% 高度 div 和溢出 :auto

Question

我在屏幕左侧有一个垂直菜单，我想采用 100% 的分辨率高度，但如果(菜单的)div 需要更多，我想显示滚动。我的问题:我有一个 height:100% 和 overflow auto 的 div。我只需要在那个 div 上滚动，但这个 div 必须是屏幕分辨率的 100%。现在，如果我这样放置，滚动会占据所有页面，但如果我将固定高度放置在 div 上，它就可以正常工作。但我需要达到 100% 的高度。非常感谢!

Answer 1

<罢工> http://cssdesk.com/yxShB <罢工> http://gearsdigital.com/sandbox/ http://jsfiddle.net/WB4Qc/

成功测试:

操作系统

• FF 3.6
• Safari 4 + 5
• Chrome 47.0

WIN7

• IE 7
• IE 8
• FF 3.5

见我上面的例子。代码工作正常...尝试调整窗口大小。一旦浏览器底部到达最后一个列表元素，您就会看到菜单 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;
    }