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

有一个非常简单的答案，使用高度：CSS中的HTML和身体选择器都是100％，你可以有效地告诉菜单100％的高度，但在需要时滚动。

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

希望有所帮助：）

Answer 3

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

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

Answer 4

我已完成齿轮数字响应，并为页面内容添加了“内容”div：

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

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

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

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

100％高度div和溢出：自动

5 个答案: