我的目标是在顶部有一个固定区域的布局，然后在剩余可用区域有一个表格(带滚动条)。为了提出这个问题，我对此进行了简化。
我试图通过在示例中显示为青色的特定大小(在本例中为 300x300 像素)的 div 来做到这一点，它包含一个包含两行的表格，第一行包含标题，然后是第二行一个包含一个 div，它又包含带有我要滚动浏览的数据的表格。
table {border-collapse: collapse;}
table,th,td {border: 1px solid gray;}
table.nowrap {white-space: nowrap;}<html>
<body>
<div style="width:300px; height:300px; background-color: cyan;">
<table>
<tr style="height:40px;background-color: lightblue;">
<td>This is the static header</td>
</tr>
<tr>
<td>
<div style='width:100%; height:100%; overflow:scroll;'>
<table class='nowrap'>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>如果你运行它，它会显示以下内容，但我不明白为什么。高/宽都是100%，难道不应该继承父级的尺寸吗？
如果我换行
<div style='width:100%; height:100%; overflow:scroll;'>
到
<div style='width:300px; height:260px; overflow:scroll;'>
然后它在 div.. 中显示可滚动表格，这是正确的(或者至少是我想要的)。但我不知道确切的大小，因为屏幕是动态构建的，并且在不同的浏览器等上。
因此，如果我指定 div 的确切宽度(在 td 内)而不是百分比，它工作正常 - 它可以从另一个父级而不是外部 分区？
最佳答案
有很多比使用表格更好的方法，但我会适合你的方法。
这是将获得所需结果的整个 html 代码(只需阅读注释以查看更改):
<html>
<head>
<title>Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid gray;
}
table.nowrap {
white-space: nowrap;
}
</style>
</head>
<body>
<!-- Added position:relative to the div -->
<div style="width:300px;position: relative;height:300px;background-color: cyan;">
<!-- Change the table position to absolute and make its width and height 100% of the parent's -->
<table style="position: absolute;width: 100%;height: 100%;">
<tbody>
<tr style="height:40px;background-color: lightblue;">
<td>This is the static header</td>
</tr>
<tr>
<!-- Added position:relative to the cell so the div will fit to it -->
<td style="position: relative;">
<!-- Make the div position absolute and position it to the top of the cell -->
<div style="position: absolute;top: 0;width:100%;height:100%;overflow:auto;">
<!--Set width and height to 100% so it will always fill the div-->
<table class="nowrap" style="width:100%;height:100%">
<tbody>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
关于html - 防止 HTML 表格溢出包含的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56599316/