如何实现页面不可滚动时容器铺满页面底部？

问题现象 #

• 页面背景为深色，导航栏透明，page-container作为白色卡片容器
• 内容充足可滚动时，page-container能正常触达页面底部
• 内容不足无法滚动时，容器底部到页面底部出现空白区域

解决方案 #

修改CSS代码，通过Flex布局让容器自动填充剩余视口高度：

html, body {
  height: 100%;
  margin: 0;
  background: #353333;
}
#root, .layout {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page-container {
  background-color: white;
  margin: 0 1rem;
  flex: 1; /* 关键：填充父容器剩余高度 */
}
.grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  column-gap: 1.5rem;
  row-gap: 1rem;
  height: fit-content;
}

原理说明 #

1. 给html和body设置height: 100%并清除默认margin，确保根层级元素能占满整个视口高度
2. 将#root和.layout设置为Flex容器并占满视口高度，垂直排列子元素
3. 给.page-container添加flex: 1，当内容不足时，它会自动拉伸填充父容器的剩余空间；当内容超出视口时，会被内容撑开，保持正常的滚动行为

内容的提问来源于stack exchange，提问作者samy.mssi