Question

我想将div高度扩展100％，但它不起作用：

enter image description here

到目前为止，我的代码是：

.add{
border:1px solid #ddd;
display:block;
float:right;
margin:0 0 10px 10px;
padding:10px;
height:100%;
}

以及HTML：

<div>

<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>

Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here

</div>

Answer 1

您应该指定外部div的高度。这样的事情会起作用：

<!doctype html>
<html>
<head>
<style>
.add
{
    border:1px solid #ddd;
    display:block;
    float:right;
    margin:0 0 10px 10px;
    padding:10px;
    height:100%;
}
</style>
</head>
<body>
<div style="height: 768px;">

<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>

Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here

</div>
</body>
</html>

Answer 2

来自CSS 2.1 Spec：

<强>百分比

指定百分比高度。百分比是根据生成的框的高度计算的   包含块。如果包含块的高度不是   明确指定（即，它取决于内容高度），以及这个   元素没有绝对定位，值计算为'auto'。

因此，由于包含块没有指定的高度，浮动元素的高度为auto。

为什么我的浮动div高度不是100％？

2 个答案: