如何实现页面局部滚动？蓝色容器滚动而非整页滚动

要让蓝色容器（.dynamic-content）内部滚动而非整页滚动，核心是限制父容器高度并正确配置滚动属性，以下是具体实现和排查要点：

1. 核心布局配置（Flex方案推荐） #

用Flex布局可自动处理剩余空间分配，避免手动计算百分比高度的误差：

HTML结构示例 #

<main>
  <!-- 非滚动区域：如头部、筛选栏等 -->
  <div class="static-header">固定头部</div>
  <!-- 需滚动的蓝色容器 -->
  <div class="dynamic-content">
    <!-- 卡片内容（大量重复触发滚动） -->
    <div class="card">卡片1</div>
    <div class="card">卡片2</div>
    <!-- ...更多卡片 -->
  </div>
  <!-- 非滚动区域：如底部栏 -->
  <div class="static-footer">固定底部</div>
</main>

CSS关键代码 #

/* 全局重置，避免默认边距干扰高度计算 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 确保body不产生滚动 */
body {
  overflow: hidden;
}

main {
  height: 100dvh;
  /* 用Flex垂直分布子元素 */
  display: flex;
  flex-direction: column;
  /* 禁止main自身滚动，把滚动权限交给内部容器 */
  overflow: hidden;
}

/* 非滚动区域设置固定高度 */
.static-header, .static-footer {
  height: 56px;
  background-color: #f5f5f5;
}

.dynamic-content {
  /* 占据main剩余的全部空间 */
  flex: 1;
  /* 内容超出时垂直滚动 */
  overflow-y: auto;
  background-color: blue;
  padding: 1rem;
}

/* 卡片样式示例 */
.card {
  height: 120px;
  margin-bottom: 1rem;
  background-color: white;
  border-radius: 8px;
}

2. 常见问题排查 #

如果配置后仍整页滚动，检查以下几点：

• body的overflow属性：若body保留默认的overflow:auto，即使main设置了100dvh，整页仍会滚动，需将body设为overflow:hidden。
• dynamic-content的父元素高度：确保父元素（main）的高度是明确的100dvh，且没有被子元素撑开超出视口。
• 是否存在margin塌陷：检查dynamic-content或其内部元素是否有垂直margin导致父容器高度被撑开，可通过overflow:hidden或padding解决。
• 避免混用高度单位：不要同时给dynamic-content设置height:100%和flex:1，前者依赖父容器的高度上下文，后者是Flex布局的剩余空间分配，混用会导致冲突。

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