Question

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

谢谢，

富。

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

Answer 1

根据您的描述，这听起来像表格数据。使用表格，无需您的任何努力即可调整以适应其内容。

Answer 2

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

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

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

2 个答案: