如何用CSS Grid实现页眉页脚固定、中间区域可滚动布局？

我来帮你搞定这个布局需求，同时解答你关于CSS Grid行高设定的疑问～

完整实现代码 #

HTML结构

<div id="container">
  <header>这是固定的页眉</header>
  <main>
    <aside class="sidebar">侧边栏内容</aside>
    <section class="content">
      <!-- 这里可放入大量段落内容测试滚动效果 -->
      <p>测试内容示例...</p>
      <p>测试内容示例...</p>
      <p>测试内容示例...</p>
      <!-- 重复足够多内容让区域超出高度 -->
    </section>
  </main>
  <footer>这是固定的页脚</footer>
</div>

CSS样式

/* 重置默认样式，避免布局受浏览器默认值干扰 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  display: grid;
  height: 100vh; /* 让容器占满整个视口高度 */
  grid-template-rows: auto 1fr auto; /* 核心行高配置 */
  grid-template-columns: 100%;
}

header, footer {
  padding: 1rem;
  background: #f0f0f0;
}

main {
  display: grid;
  grid-template-columns: 200px 1fr; /* 侧边栏固定宽度，主内容区占剩余空间 */
  gap: 1rem;
  padding: 0 1rem;
}

.sidebar {
  background: #e0e0e0;
  padding: 1rem;
}

.content {
  overflow-y: auto; /* 内容超出时自动显示垂直滚动条 */
  padding: 1rem;
  background: #fff;
}

关键布局细节解释 #

你提到的Grid行高设定疑问，这里重点拆解grid-template-rows: auto 1fr auto;的作用：

• 第一行（页眉）和第三行（页脚）的auto，意思是它们的高度由内部内容自动适配，不会被强制拉伸——内容有多高，行就有多高，这样页眉和页脚能牢牢固定在页面的顶部和底部位置。
• 中间的1fr是“剩余空间分配”的单位，它会占据容器除去页眉、页脚高度后剩下的所有可用空间，确保中间的侧边栏+主内容区域能撑满视口剩余高度，不会出现留白或溢出容器的问题。

而主内容区的.content设置overflow-y: auto后，当里面的段落内容超出该区域的高度时，就会自动触发垂直滚动，同时整个页面的页眉和页脚始终保持固定，不会被滚动内容顶出视口。

内容的提问来源于stack exchange，提问作者WoJ