100%高度div和溢出:自动

Question

我在屏幕左侧有一个垂直菜单,我想要100%高度的分辨率,但如果div(菜单)需要更多,我想要显示滚动.我的问题:我有一个高度为div:100%并且溢出自动.我只需要在该div上有滚动,但这个div必须是屏幕分辨率的100%.现在,如果我这样,滚动占用所有页面,但如果我把固定高度放到div它正常工作.但我需要100%的身高.非常感谢你!

Answer 1

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

成功通过以下测试:

OSX

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

Answer 2

我知道有两种常见的解决方案：

1) 使用 JavaScript 确定视口的高度并显式地将元素的高度设置为相同的高度（例如，类似于 的内容）yourMenuDivElement.style.height = document.documentElement.clientHeight;。您还必须确保捕获窗口调整大小事件以重置元素的高度菜单（如果窗口高度发生变化）。

html2) 更简单的纯 CSS 解决方案是将和元素的高度设置body为 100%。我相信这通常可以正常工作，尽管您的页面上可能还有其他内容可能会因将文档高度设置为 100% 而受到负面影响 - 但这绝对值得尝试。CSS 会是这样的：

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