如何实现仅滚动 div 内容区域（支持动态高度头部，无需绝对定位）-html教程-PHP中文网

如何实现仅滚动 div 内容区域（支持动态高度头部，无需绝对定位）

本文介绍一种纯 CSS 方案，让容器内仅 .content 区域可垂直滚动，而 .header 自适应高度且不固定、不依赖 position: absolute，适用于响应式和内容长度不确定的场景。

本文介绍一种纯 css 方案，让容器内仅 `.content` 区域可垂直滚动，而 `.header` 自适应高度且不固定、不依赖 `position: absolute`，适用于响应式和内容长度不确定的场景。

要实现“仅滚动内容区、头部自由伸缩”的布局，关键在于避免将滚动容器设为外层 .block，而是将滚动行为精准绑定到 .content 元素本身，同时利用 CSS 的流式布局特性（如 display: flex 或 block 流）自然分离头部与内容。

最简洁可靠的方案是：将滚动容器直接设为 .content，并为其显式设置高度和 overflow-y: auto；同时确保 .block 作为弹性容器或普通块级容器，不限制子元素高度，从而允许 .header 完全根据内容自适应。

✅ 推荐写法（现代、语义清晰、兼容性好）：

.block {
  width: 800px;
  border: 1px solid red;
  /* 不设 height，不设 overflow，让 header 自由撑开 */
}

.header {
  /* 无特殊定位，纯流式布局 */
  padding: 12px 16px;
  background-color: #f5f5f5;
  font-weight: bold;
}

.content {
  width: 100%;
  height: 200px; /* 滚动区域固定高度 */
  overflow-y: auto;
  padding: 0 16px;
  box-sizing: border-box;
}

? 注意事项：

一览运营宝

一款面向视频内容运营的AI创作工具，可辅助进行视频内容策划、创作和运营工作，帮助内容团队提高视频生产效率。

下载

.content 必须设置明确的高度（如 200px）才能触发滚动，但该高度与 .header 高度无关，因此 .header 可任意长短（单行/多行/含图片等）；
不要给 .block 设置 height 或 overflow，否则会干扰自然流布局；
若需更灵活的高度控制（例如占满剩余空间），可改用 Flex 布局：

.block {
  width: 800px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  max-height: 300px; /* 可选：限制整体最大高度 */
}

.header {
  /* 自适应高度 */
  padding: 12px 16px;
  background-color: #f5f5f5;
}

.content {
  flex: 1; /* 占据剩余所有空间 */
  overflow-y: auto;
  padding: 0 16px;
  box-sizing: border-box;
}

此 Flex 方案更健壮：.header 高度完全由内容决定，.content 自动填充剩余空间并滚动，无需预设像素高度，真正实现「变量头 + 自适应滚动体」。

⚠️ 避免的误区：