100% 高度 div 和溢出：自动答案

【问题标题】：100% height div and overflow:auto100% 高度 div 和溢出：自动
【发布时间】：2010-08-02 11:14:01
【问题描述】：

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

【问题讨论】：

标签： css

【解决方案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;
    }

【讨论】：

在 IE7 中，右侧出现灰色滚动条。我不清楚为什么这令人不安——它是垂直滚动条，而不是水平滚动条。相同的滚动条也出现在 IE6 中，但同样，它似乎可以工作，尽管我没有做足够的测试以确保当它有更多内容时它不会开始做一些奇怪的事情。
IE7/6 中的灰色滚动条是 imho 本机和浏览器/操作系统特定的。它与我的 CSS 无关... :)
如他所说，那些滚动条默认就在那里。
您无法摆脱 Firefox 中的灰色滚动条。这是浏览器的问题。
打算奖励你赏金，不幸的是这个问题不是我的问题，我误读了它，我已经解决了这个问题但不是我想要的方式，也许如果我有时间我会重新发布它并向您发送消息:)

【解决方案2】：

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

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

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

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

【讨论】：

感谢您的回答。第二个答案对我不起作用......我已经尝试过，我得到了所有页面的滚动。但是第一个解决方案可能是可行的……我要试试。谢谢您，非常感谢您的回答和您的时间

【解决方案3】：

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

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

希望对你有帮助:)

【讨论】：

【解决方案4】：

我已经完成了 gearsdigital 响应，其中包含页面内容的“内容”div：

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

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

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

【讨论】：

【解决方案5】：

无处不在

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

例子

<!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>

【讨论】：