具有高度的父级: 100%不能工作

Question

可能重复： CSS - 100% height doesn’t work

我有3个div，div-1是背景，div-2和div-3是两个容器(一个用于文本，一个用于照片)。

​

#div-1 {
  width: 100%;
  height: 100%;
  padding: 40px 0;
  margin: 0;
}

#div-2 {
  width: 500px;
  margin: 0;
  float: left;
}

#div-3 {
  width: 200px;
  margin: 0;
  float: right;
}

<div id="div-1">
  <div id="div-2"></div>
  <div id="div-3"></div>
</div>

​

我得到的是：

​

​

为什么height: 100%不能工作？

Answer 1

这是可行的

<div id="div-1">
    <div id="div-2"></div>
    <div id="div-3"></div>
    <div style="clear:both"></div>
</div>

Answer 2

删除height: 100%;中的#div-1并添加position: absolute;。一切都会好起来的。

Answer 3

在将浮动属性应用于元素之后，需要添加明确的流，更详细的介绍如下：http://www.quirksmode.org/css/clearing.html