如何实现仅滚动 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;}

? 注意事项：

• .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 自动填充剩余空间并滚动，无需预设像素高度，真正实现「变量头 + 自适应滚动体」。

⚠️ 避免的误区：

• ❌ 给 .block 设 height + overflow: auto → 整个区块滚动，不符合需求；
• ❌ 对 .header 使用 position: absolute → 破坏文档流，导致高度不可预测、无障碍访问问题；
• ❌ 仅靠 overflow-y: auto 于 .content 而不设高度 → 滚动不会生效（auto 需有边界约束）。

总结：核心原则是 滚动行为归属内容容器自身，而非父容器；布局逻辑交由标准流或 Flex 处理，拒绝脱离文档流的 hack 手段。这样既保持语义正确性，又具备良好的可维护性与可访问性。