5

可能重复：
CSS - 100% 高度不起作用

我有 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%不起作用？

4

4 回答 4

5

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

于 2012-10-15T14:50:42.593 回答
4

这可以工作

<div id="div-1">
    <div id="div-2"></div>
    <div id="div-3"></div>
    <div style="clear:both"></div>
</div>
于 2012-10-15T14:42:12.313 回答
3

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

于 2012-10-15T14:40:48.873 回答
2

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

于 2012-10-15T14:42:47.210 回答