如何定义导航栏占满高度、右侧分两行的CSS Grid布局？

需求与问题 #

我想要通过CSS Grid实现如下布局：

nav content
nav footer

即nav元素占满页面高度并拥有固定宽度，剩余空间分为内容区（content）和页脚区（footer）两部分。编写了如下SCSS代码：

$nav-width: 8.75rem;
$navbar-height: 6.125rem;
$footer-height: 6.438rem;

.auth-grid {
  display: grid;
  grid-template-rows: 1fr $footer-height;
  grid-template-columns: $nav-width 1fr;
  grid-template-areas: 'nav content' 'nav footer';
}

nav {
  grid-area: nav;
}

main {
  grid-area: content;
}

footer {
  grid-area: footer;
}

但实际渲染时出现了第三行空白区域，导航栏未占满页面高度，内容区和页脚区被挤到上方。

问题原因 #

出现额外行的核心原因是网格容器未设置高度，默认情况下网格容器高度由内部内容撑开，当子元素总高度超出容器默认高度时，Grid会自动创建额外行来容纳内容，导致布局错位。

修复方案 #

方案1：为网格容器设置全屏高度 #

先确保页面根元素占满视口高度，再给网格容器设置100%高度：

// 确保根元素占满视口，清除默认边距
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

$nav-width: 8.75rem;
$footer-height: 6.438rem;

.auth-grid {
  display: grid;
  height: 100%; // 关键：让网格容器占满父元素高度
  grid-template-rows: 1fr $footer-height;
  grid-template-columns: $nav-width 1fr;
  grid-template-areas: 'nav content' 'nav footer';
}

nav {
  grid-area: nav;
  // 可选：添加背景色便于观察布局
  background-color: #f5f5f5;
}

main {
  grid-area: content;
  background-color: #eeeeee;
}

footer {
  grid-area: footer;
  background-color: #e0e0e0;
}

方案2：使用网格线定位（更简洁） #

如果不想依赖grid-template-areas，可以直接通过网格线指定元素位置，效果一致：

html, body {
  height: 100%;
  margin: 0;
}

$nav-width: 8.75rem;
$footer-height: 6.438rem;

.auth-grid {
  display: grid;
  height: 100%;
  grid-template-columns: $nav-width 1fr;
  grid-template-rows: 1fr $footer-height;
}

nav {
  grid-column: 1 / 2;
  grid-row: 1 / -1; // 从第1行延伸到最后一行，自动占满高度
}

main {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

footer {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

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