使用 CSS 中的百分比更改容器 div 的高度以反映内容答案

【问题标题】：Changing heights of container divs using percentages in CSS to reflect contents使用 CSS 中的百分比更改容器 div 的高度以反映内容
【发布时间】：2009-10-25 18:54:48
【问题描述】：

我有以下代码可以模仿我的问题。我想使用百分比为“容器”div 中的元素设置样式。因此，我必须将“容器”div 设置为高度 100%（或其他值）才能完成这项工作。当我希望“容器” div 更改高度以反映内容时，就会出现问题。在下面的情况下，我希望高度为 200%（在这种情况下，因为我知道“容器”的内容，但我在现实世界的情况下有一个具有不同行数的数据网格）。如果我将高度设置为自动，则无法使用百分比更改子元素。有什么办法可以解决这个问题，还是我设置了固定高度的容器？

谢谢，

富有。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
<body style="height:100%">
<form style="height:100%">
<div id="Container" style="border:solid 5px;min-height:100%;height:100%">
<div style="height:100%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
<div style="height:10%; color:red"> TEST </div>
</div>
</form>
</body>
</html>

【问题讨论】：

标签： html css height

【解决方案1】：

根据您的描述，这听起来像是表格数据。使用表格，它会根据您的内容进行调整以适应其内容。

【讨论】：

我应该说我没有使用表格 - 这是一个纯 CSS 解决方案。不过感谢您的回答。
这是我不坚持基于 CSS 的布局的地方之一。一张桌子会做你想做的事，免费，没有大惊小怪。要使用 CSS 做到这一点，您必须与动态内容大小和浏览器差异作斗争，在网上搜索想法，在 SO 上发帖并希望得到答案。然后如果/当你让它工作时，它会花费更多，而且它看起来就像一张桌子。

【解决方案2】：

如果您在 Container div 的底部放置一个“spacer” div，那么容器 div 应该像内容一样扩展和收缩。

@Ray - 如果网页设计是基于表格的，那么所有其他的东西都不会被创建。基于表格的设计有很多重要的东西是你没有得到的。想到的两件事是最佳 SEO 和第 508 节合规性。

【讨论】：

您能否更深入地解释一下有关间隔 div 的内容？正如我目前拥有的那样，只有第一个“TEST”div 适合容器（因为它是 100% 高），其余的从下面漏出。换句话说，它遵循容器的高度而不是最小高度属性。如果我取出容器的高度属性，则“TEST”div 没有正确的高度间距，因为它们无法根据父（容器）div 计算它们的高度，因为我已经删除了它！再次感谢 Rich。
这应该读作不能根据父（容器）div的高度计算它们的高度，因为我已经删除了它！