100％高度div和溢出：自动

问题描述：

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

答

我知道的2个共同解决这个：

1）使用JavaScript来确定视口的高度，并明确元素的高度设置为相同的（例如沿yourMenuDivElement.style.height = document.documentElement.clientHeight;线的东西你”。 d还必须确保捕获窗口大小调整事件以在窗口高度改变时重置菜单的高度

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

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

感谢你的答案。第二个答案does not work form me ...我试过了，我得到所有页面的滚动。但firt的解决方案可能是可行的... 我将尝试它。谢谢，真的非常感谢你的回答和你的时间 – mahoni 2010-08-02 14:17:43

答

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

在试验成功：

OSX

FF 3.6
Safari浏览器4 + 5
铬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中，但是它似乎也起作用，尽管我没有做足够的测试来确保在其中有更多内容时它不会开始做一些奇怪的事情。 – 2011-02-04 19:10:05

IE7/6中的灰色滚动条是imho本机和浏览器/操作系统特定的。它与我的CSS无关...... :) – gearsdigital 2011-02-04 19:16:25

正如他所说，这些滚动条默认存在。 – reisio 2011-02-05 10:45:20

答

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

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

希望它能帮助:)

答

我已经完成了对网页内容的“内容”的div gearsdigital响应：

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

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

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

答

件

作品随处可见

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和溢出：自动

相关推荐