Css 带高度的父div:100%不'；行不通

可能重复：

我有3个

div

s，其中

div-1

是背景，

div-2

和

div-3

是两个容器（一个用于文本，一个用于照片）

HTML:

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

#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%

不起作用？

在将浮动属性应用于元素后，需要添加清除流，有关详细信息，请参见：

这可以起作用

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

div-1的高度是100%，但100%为零，因为我相信它取决于父标签的高度。尝试在css中将您的身体设置为100%高度。

删除

高度：100%#div-1

中添加code>并添加

位置：绝对。它可以正常工作。
试试这个：
html，body{height:100%；}
这些元素的高度是自动的。这对我很有用。看看标准的默认css规则，我认为这些元素没有理由具有自动高度。哦，我猜因为html没有父元素，所以它的100%高度是零？奇怪。这不起作用：100vh起作用。不必要的复杂性。它对我也起作用。谢谢