如何利用页面全部空闲空间，实现无全局滚动条且表格区可单独滚动

我完全get你想要的效果：整个页面全程不出现滚动条，上方的文本块高度跟着内容自动变化，下方的表格容器占满剩下的所有页面空间，表格内容多了就在自己的小区域里滚动。你之前的思路方向是对的，但问题出在calc(100vh - textsheight)这里——咱们没法直接用CSS拿到动态变化的texts高度，所以得换个更聪明的方式，用Flexbox弹性布局就能完美解决这个问题，这也是现在处理这种自适应空间分配最常用的方案。

下面是调整后的完整代码，直接用就行：

HTML 代码 #

<div class="pagewrapper">
  <div class="texts">
    Thse texts are chanable.<br>
    Thse texts are chanable..<br>
    Thse texts are chanable..<br>
    Thse texts are chanable..<br>
    Thse texts are chanable..<br>
    Thse texts are chanable..<br>
    Thse texts are chanable..<br>
  </div>
  <div class="tablewrapper">
    <table class="table" border>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr><td>3</td></tr>
      <tr><td>4</td></tr>
      <tr><td>5</td></tr>
      <tr><td>6</td></tr>
      <tr><td>7</td></tr>
      <tr><td>8</td></tr>
      <tr><td>9</td></tr>
      <tr><td>10</td></tr>
      <tr><td>11</td></tr>
      <tr><td>12</td></tr>
    </table>
  </div>
</div>

CSS 代码 #

/* 重置默认边距，避免页面出现多余空白 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pagewrapper {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  height: 100vh; /* 占满整个视口高度 */
  overflow: hidden; /* 隐藏页面整体的溢出内容，确保无全局滚动条 */
}

.texts {
  /* 不需要设置高度，自动适应内容高度 */
  padding: 1rem; /* 加个内边距，文本不会贴边 */
}

.tablewrapper {
  flex: 1; /* 关键！占据父容器中剩余的所有可用空间 */
  overflow-y: auto; /* 内容垂直溢出时显示滚动条 */
  padding: 0 1rem; /* 可选，让表格不贴边 */
}

.table {
  width: 100%; /* 表格填满容器宽度，修正你原来的100vh错误 */
  border-collapse: collapse; /* 可选，让表格边框更美观 */
}

关键部分解释： #

• .pagewrapper的Flex布局：用display: flex把容器变成弹性布局，flex-direction: column让里面的texts和tablewrapper垂直排列，height: 100vh确保容器占满整个视口高度，overflow: hidden直接砍掉页面整体的滚动条。
• .tablewrapper的flex: 1：这个属性是核心，意思是“拿走容器里所有剩下的空间”——不管texts的高度怎么变，tablewrapper都会自动填满剩下的部分，完全不用手动计算高度。
• overflow-y: auto：当表格内容超过tablewrapper的高度时，自动显示垂直滚动条，只在表格区域滚动，不会影响整个页面。

你可以随便改texts里的内容，不管它变高还是变矮，tablewrapper都会自动调整到剩下的空间，完美符合你的需求～

内容来源于stack exchange