如何让元素填充视口剩余高度？希望使用CSS Grid实现

嘿，你的思路方向完全正确！用CSS Grid来实现这个需求非常合适，咱们只需要调整几个细节就能完美达成效果。

首先，得先确保根元素能正确占据整个视口高度——默认情况下html和body不会自动撑满视口，所以第一步要设置基础样式：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免不必要的滚动条 */
}

接下来是核心的Grid布局设置：你提到的grid-template-rows里，把需要填充剩余高度的那一行用1fr单位代替你写的[whatever's left of the vh]就行。fr是Grid特有的分数单位，它会自动分配容器中剩余的可用空间，完美适配你的需求。

举个具体的示例，假设你的页面结构是5个部分：头部、导航、主内容区、侧边栏、底部，其中主内容区需要填充剩余高度，对应的代码如下：

HTML结构 #

<body>
  <header>头部（高度随内容自适应）</header>
  <nav>导航栏（高度随内容自适应）</nav>
  <main>主内容区（自动填充剩余视口高度）</main>
  <aside>侧边栏（高度随内容自适应）</aside>
  <footer>底部（高度随内容自适应）</footer>
</body>

CSS样式 #

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

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  /* 如果需要设置列布局，可以添加grid-template-columns，这里专注处理行高度 */
}

/* 可选：给各区域加样式方便看效果 */
header { background: #f0f0f0; padding: 1rem; }
nav { background: #e0e0e0; padding: 0.5rem; }
main { background: #fff; padding: 1rem; overflow-y: auto; /* 内容超出时可滚动 */ }
aside { background: #e0e0e0; padding: 0.5rem; }
footer { background: #f0f0f0; padding: 1rem; }

关键说明 #

• 1fr会自动计算并占据其他auto行（高度由内容决定）之后剩余的所有视口空间，不管视口怎么缩放都能保持适配。
• 相比用vh单位，1fr的优势在于：当页面内容超过视口高度时，Grid容器（body）会自动延伸，1fr行也会跟着变长，不会出现内容被截断的问题；而100vh会固定高度，可能导致内容溢出后无法显示。
• 不需要给body设置position: relative，除非你有其他定位需求，这个对Grid布局实现剩余高度没有影响。

这样设置后，目标元素就会完美填充视口的剩余高度啦！

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