高度为100％的父级div不起作用

Question

  

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

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

HTML：

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

的 CSS：

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

这就是我得到的：

为什么height: 100%不起作用？

Answer 1

在将浮动属性应用于元素后，您需要添加清晰的流程，更多相关内容：http://www.quirksmode.org/css/clearing.html

Answer 2

这可以工作

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

Answer 3

移除height: 100%;中的#div-1并添加position: absolute;。它会工作得很好。

Answer 4

＃div-1的高度是100％，但100％没有，因为它依赖于我认为的父标签高度。尝试在css中将身体设置为100％高度。