div部分内容滚动，无绝对定位，适配动态头部高度

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

在页面布局中，经常遇到这样的需求：一个容器内，头部固定不动，内容区域可以自由滚动。常见做法是给头部设置固定高度，或使用绝对定位将其“提”出来。但问题在于，如果头部内容动态变化——例如多行标题、响应式文本——这些方案会变得脆弱，要么需要 JavaScript 实时计算高度，要么维护起来非常困难。

简而言之，针对这一场景的最佳实践，推荐使用 Flexbox 布局配合 flex-direction: column、overflow: hidden 和 flex: 1 的组合。该方案天然支持动态高度的头部，无需预设任何固定值，也无需将元素从文档流中“拔”出，代码干净、语义清晰，是现代前端开发中的标准解法。

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

  
Some text
  

    
Lorem ipsum dolor sit amet...
    
  

.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"，让视障用户也能顺畅操作。

总结

这个方案相比那些把头部提到外部、或者用绝对定位强行脱离文档流的做法，最大的优势在于：HTML 语义结构完整——头部和内容仍然属于同一个逻辑区块，样式职责清晰，响应式友好，而且扩展性极强。比如后续想加个底部工具栏，只需新增一个 .footer 并同样设置 flex-shrink: 0 即可，代码几乎不需要重构。在现代前端开发中，这已经是一个标准解法，值得收入工具箱。