html - 使用 CSS 中的百分比更改容器 div 的高度以反射(reflect)内容

标签 html css height

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

谢谢,

丰富。

<!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 中的百分比更改容器 div 的高度以反射(reflect)内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1621713/

相关文章:

javascript - jquery $(window).height() 和 $(document).height() 返回相同

html - 在哪里可以找到输入占位符样式

javascript - 事件类默认为标签列表

html - 更改导航栏 Logo 字体

javascript - 尝试使用 Javascript 更改元素的 id

css - 在 Safari 中,Div 在 iPad 上崩溃

html - 在ionic中切换到另一个段时图表消失了,如何解决这个问题?

html - 慢速下拉菜单 CSS

html - 如何使用div模拟这个表?

html - <p> 标签之间的行高不同