CSS表单元溢出被FF&歌剧 [英] CSS table cell overflow is ignored by FF & Opera
问题描述
我有一个三行的CSS表，它嵌套在一个固定大小的div。该表有三行，前两行的高度由内容定义（我不能给出任何显式大小），最后一行只需要剩下的内容。最后一行有一个孩子，它是一个div，有 divs 的载入 display：inline-block 。我的问题是 - 我的div总是溢出，我想它显示一个垂直滚动条，只发生在 Chromium 。 FF& Opera简单地忽略 overflow-y：scroll ，让内容运行下来（我相信IE是相同的，我只是没有它）。我不知道如果不使用javascript，问题是否可以解决，如果是如此。
I have a three rows CSS table, which is nested in a fixed size div. The table has three rows, the height of first two rows is defined by the contents (I can't give any explicit sizes) and the last row simply takes what's left. The last row has a single child, which is a div, having loads of child divs with display: inline-block. The problem I have is - I the div is always overflowed and I want it to display a vertical scrollbar, which only happens in Chromium. FF & Opera simply ignore overflow-y:scroll and let the content run down (I belive IE is the same I just don't have it). I wonder if the problem can be solved without using javascript and if so how.
我不介意使用 HTML5 只有解决方案，只要它支持所有浏览器的最新版本。
I don't mind using HTML5 only solution as long as it's supported by the recent versions of all browsers.
更新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>
推荐答案
这里是解决方案并包装在另一个相对定位的）：
Here's the solution (overflowed div has to be positioned absolutely and wrapped in another relatively positioned one):
<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>
这篇关于CSS表单元溢出被FF&歌剧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
