本文介绍一种纯 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 手段。这样既保持语义正确性，又具备良好的可维护性与可访问性。
