如何设置scroll-menu容器仅占剩余空间且仅自身滚动？

需求说明 #

要让overall-container占满整个屏幕且不可滚动，顶部Header始终保持可见，下方的scroll-menu自动占据剩余屏幕高度，内容超出时自动滚动。原代码中scroll-menu用固定高度100px无法满足需求，需要调整CSS实现自适应剩余高度。

方法1：Flexbox（最推荐，简洁灵活） #

Flexbox是实现这种布局的最优方案，不需要手动计算高度，自动适配Header的动态高度。

修改后的CSS代码：

.overall-container {
  height: 100vh; /* 用标准的100vh代替非标准的screen值，占满视口高度 */
  border: 1px solid black;
  padding: 2px;
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  box-sizing: border-box; /* 确保padding不额外增加容器总高度 */
}

/* 给Header加个类方便样式控制（可选，但更清晰） */
.header {
  padding: 8px;
  border: 1px solid gray;
  margin-bottom: 8px; /* 与下方菜单拉开间距 */
}

.scroll-menu {
  overflow-y: auto; /* 内容超出时垂直滚动 */
  border: 1px solid blue;
  padding: 2px;
  flex-grow: 1; /* 自动占据容器剩余的所有空间 */
}

对应的HTML调整（给Header添加类）：

<div class="overall-container">
  <div class="header">
    Header
  </div>
  <div class="scroll-menu">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div>Element 12</div>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div>Element 12</div>
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
  </div>
</div>

方法2：Grid布局（同样灵活） #

Grid布局也能轻松实现，通过定义行高分配空间。

CSS代码：

.overall-container {
  height: 100vh;
  border: 1px solid black;
  padding: 2px;
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行自适应Header高度，第二行占剩余空间 */
  gap: 8px; /* 控制Header和菜单的间距 */
  box-sizing: border-box;
}

.header {
  padding: 8px;
  border: 1px solid gray;
}

.scroll-menu {
  overflow-y: auto;
  border: 1px solid blue;
  padding: 2px;
}

HTML和方法1一致，效果完全相同。

方法3：calc计算高度（不推荐，灵活性差） #

如果不想用Flex/Grid，可以手动计算scroll-menu的高度，但需要固定Header的高度，一旦Header高度变化就得重新修改数值。

CSS代码：

.overall-container {
  height: 100vh;
  border: 1px solid black;
  padding: 2px;
  box-sizing: border-box;
}

.header {
  height: 48px; /* 固定Header的总高度（含padding） */
  padding: 8px;
  border: 1px solid gray;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.scroll-menu {
  overflow-y: auto;
  border: 1px solid blue;
  padding: 2px;
  /* 总视口高度减去Header高度、容器padding、间距 */
  height: calc(100vh - 48px - 4px - 8px); 
}

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