如何让内容盒到达页面底部后停止增长并实现局部滚动

核心实现逻辑 #

• 锁定页面整体滚动：给body设置overflow: hidden，彻底避免页面整体滚动。
• 计算容器最大高度：通过calc(100vh - 顶部间距 - 3rem)确定容器的最大可用高度，其中100vh是视口总高度，减去容器到顶部的距离和要求的底部3rem间距，确保容器不会超出页面边界。
• 限定滚动区域：让容器内的目标区域（蓝色轮廓部分）占满容器剩余高度，并设置overflow-y: auto，仅该区域在内容超出时滚动。

示例代码 #

HTML结构 #

<body>
  <!-- 页面其他固定内容 -->
  <div class="container">
    <div class="container-header">容器头部（固定不滚动）</div>
    <div class="scroll-section"> <!-- 蓝色轮廓的滚动区域 -->
      <div class="child-item">子元素1</div>
      <div class="child-item">子元素2</div>
      <!-- 更多子元素 -->
    </div>
  </div>
</body>

CSS样式 #

body {
  margin: 0;
  overflow: hidden; /* 禁止页面整体滚动 */
}

.container {
  margin-top: 1.5rem; /* 容器到页面顶部的间距，根据实际布局调整 */
  max-height: calc(100vh - 1.5rem - 3rem); /* 视口高度 - 顶部间距 - 底部3rem */
  width: 80%; /* 示例宽度，可自定义 */
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}

.container-header {
  padding: 1rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #eee;
}

.scroll-section {
  flex: 1; /* 自动填充容器剩余高度 */
  overflow-y: auto; /* 内容超出时垂直滚动 */
  border: 1px solid blue; /* 对应需求中的蓝色轮廓滚动区域 */
  padding: 1rem;
}

.child-item {
  padding: 1.2rem;
  border-bottom: 1px solid #ddd;
  margin-bottom: 0.5rem;
}

关键注意事项 #

• 如果容器包含padding、border等内边距或边框，需要在calc()中额外减去这些值，比如max-height: calc(100vh - 1.5rem - 3rem - 2px)（2px是容器上下边框的总宽度），避免容器高度计算偏差。
• 使用flex布局可以确保容器头部固定，滚动区域自动适配剩余空间，无需手动计算头部高度。
• 若页面顶部存在固定导航栏，记得在calc()中加上导航栏的高度，比如max-height: calc(100vh - 60px - 1.5rem - 3rem)（60px为导航栏高度）。

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