我有一个三行 CSS 表，它嵌套在固定大小的 div 中。该表有三行，前两行的高度由内容定义(我无法给出任何明确的大小)，最后一行仅采用剩下的内容。最后一行有一个子元素，它是一个 div，包含大量带有 display: inline-block 的子元素 div。我遇到的问题是 - 我的 div 总是溢出，我希望它显示一个垂直滚动条，这只发生在 Chromium 中。 FF 和 Opera 只是忽略 overflow-y:scroll 并让内容运行下去(我相信 IE 是一样的，只是没有它)。我想知道这个问题是否可以在不使用 javascript 的情况下解决，如果可以的话如何解决。
我不介意仅使用 HTML5 解决方案，只要所有浏览器的最新版本都支持它即可。
更新 1 - 只是想澄清 - 我无法对任何行使用显式大小，因为它们承载未知高度的控件。
<html>
<body>
<div style="width: 500px; height: 300px;">
<div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ccc;">Test</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: white;">Filter</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; height: 100%;">
<div style="height: inherit; overflow-y: scroll">
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
这是解决方案(溢出的 div 必须绝对定位并包装在另一个相对定位的 div 中):
<html>
<body>
<div style="width: 500px; height: 300px;">
<div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ccc;">Test</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: white;">Filter</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; height: 100%;">
<div style="position: relative; width: 100%; height: 100%;">
<div style="overflow-y: scroll; position: absolute; top: 0px; right:0px; bottom: 0px; left: 0px;">
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
关于html - FF 和 Opera 忽略 CSS 表格单元格溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12778488/