本文介绍一种纯 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 class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill606" title="前端开发规范"><img
src="https://img.php.cn/upload/skill/000/000/081/178753334778462.jpg" alt="前端开发规范" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill606" title="前端开发规范" class="overflowclass">前端开发规范</a>
<p class="overflowclass">企业级前端开发规范 Skill，包含命名、目录、CSS/JS/TS、Vue/React、Git、构建、性能、安全完整规范</p>
</div>
<a rel="nofollow" href="/xiazai/skill606" title="前端开发规范" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<!-- 更多内容 -->
</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（
- 移动端需添加 -webkit-overflow-scrolling: touch 提升滚动流畅度：
.content { -webkit-overflow-scrolling: touch; } - 如需支持键盘导航（如 Tab 键聚焦滚动区域），建议为 .content 添加 tabindex="0"。
✅ 总结
相比移除 .block 样式或将 .header 提至外层等变通做法，本方案保持 HTML 语义结构完整（头部与内容仍属同一逻辑区块），样式职责清晰，响应式友好，且易于扩展（例如后续添加底部工具栏只需新增 .footer 并同样设置 flex-shrink: 0）。这是现代前端开发中推荐的标准解法。
