html - 溢出留下很多空白

Question

我在 CSS 中遇到溢出问题，因为它现在在表格下方留下了很大的空白区域。

问题:

假设窗口高 500px，我将 tbody 的高度设置为 100px，溢出设置为 auto。 tbody 中的 html 高度为 1000px。

为什么浏览器会滚动到 1000px 而不是 100px(500px)？

请参阅fiddle

这是我的 HTML:

<table class="height">
    <tbody class="height">
        <tr>
            <td>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            </td>
        </tr>
    </tbody>
</table>

这是我的 CSS:

tbody {
    height: 100px;
    overflow: auto;
}


thead > tr, tbody{
    display:block;}

查看它的简单方法。

我应该只有一个滚动条。不是这个额外的。

Answer 1

你能把它放在一个 div 容器中，并做同样的溢出吗？我不确定是否会将所有这些应用到 tbody 上，除非有特定需要。

http://jsfiddle.net/bS4pL/

.fixedHeight {
    height: 300px;
    overflow-y: auto;
}


<div class="fixedHeight">
    <table>
        <tbody class="height">
            <tr>
                <td>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                    <p>a</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>