如何让div或tr严格遵循固定百分比高度，不受字体大小干扰？

一、推荐：Flexbox 布局（简单可靠） #

用Flexbox可以轻松实现固定比例的高度分配，同时处理内容溢出的问题，确保布局不会被撑开。

代码示例 #

CSS：

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh; /* 让body占满整个视口高度 */
}

.small {
  flex: 0 0 20vh; /* 固定20vh高度，不随内容伸缩 */
  overflow: auto; /* 内容超出时显示滚动条 */
  border: 1px solid #ccc; /* 可选：添加边框方便查看布局 */
}

.large {
  flex: 0 0 60vh; /* 固定60vh高度 */
  overflow: auto;
  border: 1px solid #ccc;
}

HTML：

<body>
  <div class="small">这里放顶部内容，即使字体很大或内容过多，超出部分会在容器内滚动，高度始终保持20%</div>
  <div class="large">中间区域，内容超出时同样会滚动，高度固定为60%</div>
  <div class="small">底部区域，高度固定为20%</div>
</body>

关键说明 #

flex: 0 0 20vh 表示该元素不放大、不缩小，固定占用20vh的高度；搭配overflow: auto，当内容超出容器高度时，会自动显示滚动条，不会撑破布局。

二、修复你的 Table 布局 #

如果必须使用表格实现，需要调整表格的布局规则，强制行高度生效：

代码示例 #

CSS：

body {
  margin: 0;
  padding: 0;
}

table {
  width: 100%;
  height: 100vh; /* 让表格占满视口高度 */
  table-layout: fixed; /* 强制按设置的尺寸布局，不随内容自动调整 */
  border-collapse: collapse;
}

.small {
  height: 20%; /* 用百分比适配，效果和vh一致 */
}

.large {
  height: 60%;
}

/* 核心：给td设置溢出处理，因为tr本身无法直接控制内容溢出 */
.small td, .large td {
  height: 100%;
  overflow: auto; /* 内容超出时滚动 */
  border: 1px solid #ccc;
}

HTML：

<body>
  <table>
    <tr class="small">
      <td>顶部内容，大字体或多内容会在单元格内滚动，行高度保持20%</td>
    </tr>
    <tr class="large">
      <td>中间区域，高度固定60%</td>
    </tr>
    <tr class="small">
      <td>底部区域，高度固定20%</td>
    </tr>
  </table>
</body>

关键说明 #

table-layout: fixed 是解决问题的核心，它让表格不再根据内容自动调整单元格大小，严格遵循设置的高度比例。同时需要给<td>设置height:100%和overflow:auto，因为内容实际放在<td>中，只有这样才能让超出的内容在单元格内滚动，不会撑高整行。

内容的提问来源于stack exchange，提问作者GoldyCantCode