Question

我有一个侧边栏DIV，我想垂直扩展以匹配其包含的div。

我这样做是为了实现这个目标

html, body, #wrapper, #content, #sidebar{
    height:100%;
}

但是包装器，内容和侧边栏永远不会扩展到大约1000px，即使内容是内容的几倍。

我认为这是因为#wrapper，#content的内容完全是浮动的DIV。

我试图将clear:both的空DIV作为#wrapper和#content中的最后一个元素，但无济于事。

<body>
<div id="wrapper">
  <div id="footer">
  </div>
  <div id="sidebar">
  </div>
  <div id="content">
   .... 
     <div class="clear"/>
  </div>
  <div class="clear"/>
</div>
</body>

注意：页脚是固定位置

Answer 1

问题是你将100％设置为html，body和#wrapper，这会强制他们的身高成为父母的身高，＃wrapper的父亲是身体，身体是html，什么是html的父母？我不确定，我猜测浏览器窗口（或其视口），如果是这样，那么#wrapper的高度将始终等于浏览器窗口的高度，所以如果你的浏览器窗口的高度是1000px，那么 #wrapper的高度始终为1000px，因为你将100％设置为#sidebar和#content，尽管内部元素的高度为高，但它们的高度也始终为1000px
如果我是对的，你应该做的是分别设置html的高度，保持别人的高度为100％，并将html的最小高度设置为100％并保持高度。从理论上讲，这将迫使html至少与浏览器窗口一样高，但是当内部元素高于浏览器时会扩展，但我还没有测试过它。

如果我是对的，请告诉我
的修改：
~~我测试了它，它的工作原理。这样做：~~

html, body{ min-height: 100%; }

不要设置高度，如果要考虑内部元素的高度，请确保清除浮动并且不要在内部元素上进行绝对定位。现在，当没有足够的元素可以推动它时，正文将占据浏览器窗口的整个视图端口，当存在时，正文将扩展到页面的最底部，而不仅仅是浏览器窗口。

~~在chrome中测试它，也应该在firefox中工作不知道ie。~~
不，在第二次测试中，它没有工作似乎只有当父母有一个给定的高度（例如身高：500px或身高：100％）时，身高：100％才有效;当父元素的min-height：100％且没有高度时，内部元素不能使用height：100％来匹配父元素。

Answer 2

我认为不需要将这些元素的高度设置为100％。你说，“我有一个侧边栏DIV，我想垂直扩展，以匹配其包含div。”你是说你希望侧边栏的高度与#content DIV的高度相匹配？在这种情况下，请考虑“虚拟列”方法，描述为here。另一种方法是使用Javascript计算#content div的高度，并将高度应用于#sidebar。

要正确清除浮子，清除元件应放置在浮动元件之后，而不是放在其内部。我经常使用的一个有用技巧是伪选择器：AFTER。假设，您必须清除#content。然后：

#content:after
{
   content: ".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}

这将在元素后面放置一个不可见的元素，它将清除你的元素。

Answer 3

要使div与其容器的高度匹配，您可以使用定位：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
             "http://www.w3.org/TR/html4/strict.dtd">
 <html>    
 <head>
 <style>
 #wrapper{position:absolute;top:0px;right:0px;bottom:0px;left:0px}
 #footer{position:absolute;height:100px;right:0px;bottom:0px;left:0px;background:green}
 #sidebar{position:absolute;width:200px;top:0px;bottom:100px;left:0px;background:blue}
 #content{position:absolute;top:0px;right:0px;bottom:100px;left:200px;background:red}
 </style>
 </head>
 <body>
 <div id="wrapper">
   <div id="footer">
   </div>
   <div id="sidebar">
   </div>
   <div id="content">
   </div>
 </div>
 </body>
 </html>

Answer 4

根据我float:left/right删除它可以告诉它，它会调整

CSS div高度不会扩展

4 个答案: