Div容器100％高度不起作用

Question

我正在尝试让两个DIV的包含元素高度为100％。但由于某些奇怪的原因，它始终保持在200px。 body元素和div #wrapper设置为100％高度，但只有200px高。

此外，当我使用Chrome的元素检查器设置HTML {height: 100%}时，实际的HTML元素设置为200px。

模拟网站： CodePen https://1cfa12692148c3352bc30134a5ae506804775e77.googledrive.com/host/0B_5GGeR4a3S6ODlydkNFQnZHbWM/index.html

Answer 1

尝试将body和wrapper位置设为绝对位置，并将顶部和底部尺寸设置为0。

position: absolute;
top: 0;
bottom: 0;
height:100%;

希望它能完成这项工作。

Answer 2

这是因为你有很多浮动元素和绝对位置。如果你使用像.clearfix这样的类，你的身高可能会很好。 Codepen

.clearfix { 
  display: block;
  clear: both;
}
.clearfix:before,
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

我将此课程添加到您的#content

<div id="content" class="clearfix"> 
   ...
</div>
<div id="footer" class="clearfix"> 
   ...
</div>