我想创建一个表格或 3 个单独的 div，我不在乎哪个。我要做的就是将屏幕划分为顶部 20%、中间 60% 和底部 20%。我已经用下面的代码完成了一些工作；但是，如果我在顶部 div 或 tr 中将字体设置得非常大，它就会开始侵入中间部分和底部部分的空间，并且页面最终不仅顶部部分比底部部分大，而且关闭底部并添加一个滚动条。换句话说，它忽略了我的 20% 高度分配，这真的很酷，很棒。
body {
margin: 0px;
padding: 0px;
}
.small {
height: 20vh;
max-height: 20vh;
min-height: 20vh;
}
.large {
height: 60vh;
max-height: 60vh;
min-height: 60vh;
} <body>
<table>
<tr class="small"></tr>
<tr class="large"></tr>
<tr class="small"></tr>
</table>
</body>我如何强制执行 20% 的限制，这样即使顶部的字体更大，它也不会开始分配比我告诉它的更多的空间？
如果我没理解错的话，你可以使用 Grid 来实现这个布局。 下面我使用了三个 div 和一个主包装器。
当使用 rem 作为宽度或高度的单位时，如果我们更改父字体大小，它也会影响子值
body {
margin: 0px;
padding: 0px;
box-sizing:border-box;
}
main{
display: grid;
grid-template-columns: 100vw;
grid-template-rows: 20vh 60vh 20vh;
}
div{
border:1px solid grey;
padding:10px;
}<main>
<div>I am small</div>
<div>I am Big</div>
<div>I am small</div>
</main>