CSS如何把页面分为头部、侧边、主体和底部

display: grid 三行代码可实现四区布局，关键在于用 grid-template-areas 命名区域、minmax(0, 1fr) 防撑爆、html/body 设 height: 100% 确保高度上下文。

用 display: grid 三行代码搞定四区布局

不用浮动、不靠绝对定位，display: grid 是目前最直接可控的方式。关键不是“怎么分”，而是“怎么让各区域不打架又自适应”。

常见错误是给 header、aside 等加固定高度或 position: absolute，结果内容一多就溢出或遮挡。

• 定义容器为 grid，用 grid-template-areas 命名区域，语义清晰且易维护
• 用 minmax(0, 1fr) 替代单纯 1fr，防止内容撑爆侧边栏（尤其长文本或未设 overflow 的 aside）
• 必须给 html 和 body 设 height: 100%，否则 100vh 在某些安卓 WebView 下会失效

body {
  margin: 0;
  height: 100vh;
}
.layout {
  display: grid;
  grid-template-areas: 
    "header header"
    "aside  main"
    "footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 240px 1fr;
  height: 100%;
}

侧边栏宽度固定但内容超长时滚动失效

很多人设了 width: 240px 就以为万事大吉，结果里面放个长列表，滚不动——根本原因是父容器没限制高度，子元素无法触发 overflow。

• aside 必须有明确高度上下文，比如父级 grid 给了 1fr 行高，它才能用 height: 100%
• overflow-y: auto 要加在 aside 内部的直接子容器上（比如一个 <div class="scroll-area">），不能只加在 aside 自身
• 避免在 aside 上设 flex 或 display: grid 后又忘设 align-items: flex-start，否则内容会被居中挤到看不见

position: sticky 头部/底部在滚动时消失

sticky 不是万能胶，它依赖最近的「有约束的滚动容器」。默认情况下，整个页面滚动，header 只要脱离视口就会隐藏，根本不会吸顶。

闪念贝壳

闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。

下载

立即学习“前端免费学习笔记（深入）”；

• 必须确保 header 的父容器没有 overflow: hidden 或 transform（哪怕只是 transform: translateZ(0)）
• top: 0 才生效，top: 1px 或负值会导致吸顶失败；iOS Safari 对 sticky 支持较弱，建议加 -webkit-sticky
• 如果用了 grid 布局，header 所在的 grid cell 不能是 auto 行高，得是 min-content 或固定值，否则粘不住

兼容老浏览器时别硬刚 grid

IE11 完全不支持 grid-template-areas，但可以用 display: -ms-grid 模拟，代价是写两套规则、调试成本翻倍。更实际的做法是降级为 flex + calc()。

• 用 @supports (display: grid) 包裹现代写法，老浏览器自动 fallback 到 flex 方案
• flex-direction: column 做垂直分区时，main 区域必须设 flex: 1，否则不会占满剩余空间
• 不要试图用 float 实现四区——footer 脱离文档流后，经常卡在 main 中间，修起来比重写还慢