如何仅滚动 div 的部分内容而不使用绝对定位并支持动态头部高度

本文介绍一种纯 css 方案，通过 flexbox 实现容器内仅内容区域可垂直滚动，头部高度自适应、无需固定值或绝对定位，兼容现代浏览器且语义清晰。

本文介绍一种纯 css 方案，通过 flexbox 实现容器内仅内容区域可垂直滚动，头部高度自适应、无需固定值或绝对定位，兼容现代浏览器且语义清晰。

要实现“仅 .content 区域可滚动，而 .header 始终固定显示，且不依赖 position: absolute 或预设头部高度”，最佳实践是采用 Flexbox 布局 + flex-direction: column + overflow: hidden + flex: 1 组合。该方案天然支持动态高度的头部（如多行标题、响应式文本），无需 JavaScript 计算，也避免了脱离文档流带来的维护隐患。

✅ 推荐解决方案（语义正确、可维护性强）

<div class="block">  <div class="header">Some text</div>  <div class="content">    <p>Lorem ipsum dolor sit amet...</p>    <!-- 更多内容 -->  </div></div>

.block {  width: 800px;  height: 200px; /* 整体容器高度固定 */  border: 1px solid red;  display: flex;  flex-direction: column;  overflow: hidden; /* 防止外层溢出，确保滚动由子元素控制 */}.header {  /* 不设高度，自然撑开；可加 padding/margin */  flex-shrink: 0; /* 确保头部不被压缩 */  background-color: #f9f9f9;  padding: 12px 16px;  border-bottom: 1px solid #eee;}.content {  flex: 1; /* 占据剩余全部空间 */  overflow-y: auto; /* 仅此处产生滚动条 */  padding: 12px 16px;  /* 可选：隐藏滚动条（仅 WebKit） */  /* &::-webkit-scrollbar { display: none; } */}

? 关键原理说明

• display: flex + flex-direction: column 将 .block 设为纵向弹性容器；
• .header 设置 flex-shrink: 0，防止其在空间不足时被压缩，保证内容完整显示；
• .content 使用 flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0），自动填充剩余高度；
• overflow-y: auto 仅作用于 .content，滚动行为完全受其内部内容高度驱动；
• 外层 .block 的 overflow: hidden 是良好实践，避免意外溢出破坏布局。

⚠️ 注意事项

• 不要给 .header 设置 height 或 max-height —— 否则将破坏动态高度特性；
• 若需在旧版 IE（<11）中兼容，请改用 display: table 模拟（但已不推荐）；
• 移动端需添加 -webkit-overflow-scrolling: touch 提升滚动流畅度：

  .content {  -webkit-overflow-scrolling: touch;}

• 如需支持键盘导航（如 Tab 键聚焦滚动区域），建议为 .content 添加 tabindex="0"。

✅ 总结

相比移除 .block 样式或将 .header 提至外层等变通做法，本方案保持 HTML 语义结构完整（头部与内容仍属同一逻辑区块），样式职责清晰，响应式友好，且易于扩展（例如后续添加底部工具栏只需新增 .footer 并同样设置 flex-shrink: 0）。这是现代前端开发中推荐的标准解法。