我有一个三行 CSS 表,它嵌套在一个固定大小的 div 中。该表有三行,前两行的高度由内容定义(我不能给出任何明确的大小),最后一行只是剩下的。最后一行有一个孩子,这是一个 div,有很多divs
孩子display: inline-block
。我遇到的问题是 - 我的 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>