我正在设置一个包含大量动态内容的页面。我在一张 table 里组织这个。一共有三行，每一行都有一个单元格。顶部用作固定标题，因为我已经设置了顶部单元格的高度。底部单元格用作页脚，因为它也有静态高度。表格的总高度设置为 100%，中间的行/单元格被动态内容和表格中的剩余空间填充。下面是一个两行的例子来演示这个问题:
<html>
<body>
<div class="element_container", style="width: 600px; height: 500px;">
<div class="table", style="display: table; height: 100%; width: 100%; background: blue;">
<div class="row", style="display: table-row;">
<div class="cell", style="display: table-cell; height: 40px; width: 100%; background: green;">
</div>
</div>
<div class="row", style="display: table-row;">
<div class="cell", style="display: table-cell; height: 100%; width: 100%; background: red;">
</div>
</div>
</div>
</div>
</body>
</html>
在 Chrome/Firefox/Safari 中，表格的总高度保持在 500px。在 IE8 中，它变为 540px，就好像第二个单元格的 100% 高度是从表格本身而不是其父行继承的。
有没有办法让表格在浏览器中以相同的方式工作？或者，至少，在 IE8 的表格中获得相同类型的功能？
最佳答案
不确定为什么不使用表格标签就尝试创建表格？这似乎工作正常。
<html>
<body>
<table style="width:600px; height:500px; background:blue;">
<tr>
<td style="height:40px; background: green;">Hi</td>
</tr>
<tr>
<td style="background: red;">Hello</td>
</tr>
</table>
</body>
</html>
关于css - 显示 : Table-cell not setting height constantly xbrowser (ie8 table bug)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4017268/