设置100%高度DIV容器内嵌表格并显示滚动条的实现需求

方案一：基于百分比高度的实现 #

要让容器div自适应100%可用高度，首先得确保根元素的高度被正确定义，同时清除页面默认边距避免全局滚动：

/* 重置页面默认样式，确保根元素高度生效 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 禁用页面级滚动 */
}

/* 容器div核心样式 */
.table-container {
  height: 100%;
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  padding: 10px; /* 可选，避免内容贴边 */
  box-sizing: border-box; /* 内边距不额外增加容器高度 */
}

/* 表格优化样式（可选） */
.table-container table {
  width: 100%;
  border-collapse: collapse;
}
.table-container th, .table-container td {
  border: 1px solid #ddd;
  padding: 8px;
}

对应HTML结构：

<div class="table-container">
  <table>
    <!-- 插入大量表格行 -->
    <tr><td>记录1</td></tr>
    <tr><td>记录2</td></tr>
    <!-- ... 更多记录 ... -->
  </table>
</div>

方案二：使用视口单位vh（更简洁） #

视口单位vh直接对应浏览器可视窗口高度，无需依赖父元素高度设置：

/* 清除页面默认边距 */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.table-container {
  height: 100vh; /* 直接占满可视窗口高度 */
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px;
}

/* 表格样式同上 */

关键细节说明 #

• overflow-y: auto：仅当容器内内容高度超过容器自身时，才会显示垂直滚动条，否则隐藏。
• box-sizing: border-box：确保内边距、边框不会让容器总高度超出视口。
• body设置overflow: hidden：彻底避免页面出现全局滚动条，所有滚动操作都限制在容器内。

这两种方案都能让容器随浏览器窗口大小自适应伸缩，完美适配平板、大屏PC等不同设备。

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