为什么我的浮动 div 高度不是 100%？答案

【问题标题】：Why my floating div height is not 100%?为什么我的浮动 div 高度不是 100%？
【发布时间】：2011-12-13 10:50:16
【问题描述】：

我想将我的 div 高度扩大 100%，但它不起作用：

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

.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>

【问题讨论】：

你能提供你的html结构吗？

标签： html css height

【解决方案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>

【讨论】：

有没有办法在不指定高度的情况下做到这一点（并且不使用丑陋的桌子）？
您可以将外部 div 的样式更改为 height: 100%;，然后在您的 CSS 中添加另一条规则 html, body {height: 100%;}。但无论哪种方式，都必须指定外部 div 的高度。

【解决方案2】：

来自CSS 2.1 Spec：

百分比

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

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

【讨论】：

当然不是。但是提供的两个答案回答了您的问题。也许如果你解释你想用布局完成什么，有人可以提出另一种方法。如果仅仅是柱子占据整个高度的外观，经典的faux column technique是一种方式。
所以您建议我将“为什么不...”更改为“我该怎么做...”所以提供的 2 个答案不能回答我的问题？如果被问到“你剪头发了吗”，你是那种人吗？你回答：“不，别人替我剪了”
您还没有确切地告诉我们您要完成的工作。我们可以猜测，但如果你告诉我们，它可能会更快。 2 列布局与 100% 高度侧边栏？如果这就是你想要的，我上面链接的文章将实现这一点。
我确实告诉了我要完成的工作“我想将 div 高度扩大 100%，但它不起作用”