Html 溢出会留下大量空白

我有一个CSS溢出的问题，因为它现在在表格下面留下了一个巨大的空白区域

问题是： 假设窗口是500px高，我将tbody的高度设置为100px，溢出设置为自动。tbody中的html高达1000px

为什么浏览器会滚动到1000px而不是100px500px

请看

这是我的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>

简单的方式来看待它。 我应该只有一个滚动条。不是这个多余的

---

你能把它装在一个div容器里，然后做同样的溢出吗？我不确定我是否会将所有这些应用于tbody，除非有特殊需要

尝试将display:block添加到表类中。现在它默认为display:table，其行为与常规div块不同

---

为了更好地控制css样式，我建议将表格放入div而不是body中：

这并不能回答问题。

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


thead > tr, tbody{
    display:block;}

.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>