CSS 100% 高度 div 和溢出：自动

100% height div and overflow:auto

提问by mahoni

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!

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

回答by gearsdigital

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

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

• FF 3.6
• 野生动物园 4 + 5
• 铬 47.0

WIN7

WIN7

• IE 7
• IE 8
• FF 3.5

• 浏览器 7
• 浏览器 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.

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

css：

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

回答by Kyle

There is a farily simple answer to this, using height: 100% on both the HTML and body selectors in CSS, you can effectively tell the menu to be 100% of the height, but scroll when it needs to.

对此有一个非常简单的答案，在 CSS 中的 HTML 和正文选择器上使用 height: 100%，您可以有效地告诉菜单为高度的 100%，但在需要时滚动。

I have made an example for you here at jsFiddle.net. (resize the Result window to see the effect)

我在jsFiddle.net为你做了一个例子。（调整结果窗口大小以查看效果）

Hope it helps :)

希望能帮助到你 ：）

回答by Will Prescott

I know of 2 common solutions to this:

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

1) Use JavaScript to determine the height of the viewport and explicitly set the height of the element to the same (e.g. something along the lines of yourMenuDivElement.style.height = document.documentElement.clientHeight;. You'd also have to make sure to capture the window resize event to reset the height of the menu if the window height changes.

1) 使用 JavaScript 来确定视口的高度，并显式地将元素的高度设置为相同（例如，沿着yourMenuDivElement.style.height = document.documentElement.clientHeight;.菜单，如果窗口高度改变。

2) The much simpler CSS-only solution is to set the height of the htmland bodyelements to both be 100%. I believe this generally works OK, though you may have other things on your page that could be negatively affected by setting the document height to 100% perhaps - but it's definitely worth trying it. CSS would be something like:

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

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

回答by Guillaume86

I've completed gearsdigital response with a "content" div for the content of the page:

我已经完成了带有页面内容的“内容”div的 gearsdigital 响应：

http://jsfiddle.net/Guillaume/NnW5r/11/show/

http://jsfiddle.net/Guillaume/NnW5r/11/show/

code: http://jsfiddle.net/Guillaume/NnW5r/11/

代码：http: //jsfiddle.net/Guillaume/NnW5r/11/

Resize the window and scroll the page to see if it fits your needs

调整窗口大小并滚动页面以查看它是否符合您的需要

回答by user3126867

Works everywhere

无处不在

JS

JS

function overflowFillHeight(el,listener){
    var sumH = 0;
    if(el){
       var parEls = el.parentNode.childNodes;
       var style = null;
       if(parEls.length > 1){
           for(var j = 0; j < parEls.length; j++){
              if(parEls[j].nodeType != 3){
                 if(parEls[j] != el ){

                    sumH += parEls[j].clientHeight;

                    if(typeof window.getComputedStyle(parEls[j]) != 'undefined'){
                       style = window.getComputedStyle(parEls[j]);
                    }else if(typeof parEls[j].currentStyle != 'undefined'){
                       style = parEls[j].currentStyle;
                    };

                    if(style){
                       sumH += parseInt(style.marginTop);
                       sumH += parseInt(style.marginBottom);
                       sumH += parseInt(style.borderTopWidth);
                       sumH += parseInt(style.borderBottomWidth);
                    };

                 };
              };
           };
       };

       style = null;
       if(typeof window.getComputedStyle(el) != 'undefined'){
          style = window.getComputedStyle(el);
       }else if(typeof el.currentStyle != 'undefined'){
          style = el.currentStyle;
       };

       if(style){
          sumH += parseInt(style.marginTop);
          sumH += parseInt(style.marginBottom);
          sumH += parseInt(style.borderTopWidth);
          sumH += parseInt(style.borderBottomWidth);
       };

       el.style.height = (el.parentNode.clientHeight - sumH)+'px';

       if(!listener){
          window.addEventListener('resize',function(){
             overflowFillHeight(el,true);
          },false);
       };
    };
}; 

example

例子

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script>
    function overflowFillHeight(el,listener){
        var sumH = 0;
        if(el){
           var parEls = el.parentNode.childNodes;
           var style = null;
           if(parEls.length > 1){
               for(var j = 0; j < parEls.length; j++){
                  if(parEls[j].nodeType != 3){
                     if(parEls[j] != el ){

                        sumH += parEls[j].clientHeight;

                        if(typeof window.getComputedStyle(parEls[j]) != 'undefined'){
                           style = window.getComputedStyle(parEls[j]);
                        }else if(typeof parEls[j].currentStyle != 'undefined'){
                           style = parEls[j].currentStyle;
                        };

                        if(style){
                           sumH += parseInt(style.marginTop);
                           sumH += parseInt(style.marginBottom);
                           sumH += parseInt(style.borderTopWidth);
                           sumH += parseInt(style.borderBottomWidth);
                        };

                     };
                  };
               };
           };

           style = null;
           if(typeof window.getComputedStyle(el) != 'undefined'){
              style = window.getComputedStyle(el);
           }else if(typeof el.currentStyle != 'undefined'){
              style = el.currentStyle;
           };

           if(style){
              sumH += parseInt(style.marginTop);
              sumH += parseInt(style.marginBottom);
              sumH += parseInt(style.borderTopWidth);
              sumH += parseInt(style.borderBottomWidth);
           };

           el.style.height = (el.parentNode.clientHeight - sumH)+'px';

           if(!listener){
              window.addEventListener('resize',function(){
                 overflowFillHeight(el,true);
              },false);
           };
        };
    };
    </script>
    <style>
    *{
        margin:0px;
        padding:0px;
    }
    html,body{
        height:100%;
    }
    .g1{
        margin-bottom:34px;
        border:20px double #CCFF00;
    }
    </style>
    </head>

    <body>

    <div style="height:100%; background:#F00;">
    <div class="g1" style="height:37px; background:#00F;">1</div>
    <div id="qqq" class="g1" style="background:#39F; overflow:auto; height:300px;">
       <div style="height:1000px;">2</div>
    </div>
    <div style="height:100px; background:#060;">3</div>
    </div>
    <script>
       overflowFillHeight(document.getElementById('qqq'));
    </script>
    </body>
    </html>