100％高度div和溢出：自动 [英] 100% height div and overflow:auto

问题描述

我在屏幕的左侧有一个垂直菜单，我想采用100％的分辨率，但是如果（菜单的）div需要更多，我想显示滚动。
我的问题：我有一个高度为100％的div，并且自动溢出。
我只需要在该div上滚动，但是该div必须是屏幕分辨率的100％。现在，如果我这样放置，滚动条将占据所有页面，但是如果我将固定高度放到div上，它将正常工作。但是我需要达到100％的身高。
非常感谢！

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!

推荐答案

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

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

这篇关于100％高度div和溢出：自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！