html - 表格 CSS 在 Chrome 和 Firefox 中有不同的效果

Question

我试图让表格中的列具有预定义的高度，并滚动以允许它们的内容适合。我目前使用的是 Chrome 和 Safari，但不适用于 Firefox(至少在我的 MacBook 上)。在 Firefox 中，由于某种原因，表格的高度会增长以适应其所有内容。

这是 HTML，

<table>
<tbody>
    <tr>
        <td>
            <div class="scrolling_div">
                ...{content}...
            </div>
        </td>
    </tr>
</tbody>

CSS，

/*** css reset ***/
html * { margin: 0; padding: 0; border: 0; font-size: 1em; text-decoration: none; line-height: 1em; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

/*** actual css ***/
table {
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
}

.scrolling_div {
    height: 100%;
    overflow-y: scroll;
}

和 JSFiddle for this question .

如果您将 .scrolling_div 的高度设置为特定像素数，则可以解决此问题，但我想将其保持在 100% 以使其填满表格，因此这适用于不同的表格大小。

如有任何帮助，我们将不胜感激。

Answer 1

只需将 'max-height:tableHeight' 添加到 .scolling_div

.scrolling_div {
    height: 100%;
    overflow-y: scroll;
    max-height: 50vh;
}