如何让grid-container占据nav未使用的剩余视口空间（不使用vh单位）

当设置height:100%不符合预期、100vh导致内容溢出时，推荐以下两种自适应方案：

方法一：CSS Grid布局 #

利用Grid的比例分配特性，让容器自动分配剩余空间：

/* 重置body默认边距，设置为Grid容器 */
body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr; /* nav高度自适应，grid-container占剩余空间 */
  min-height: 100vh; /* 确保body至少铺满视口高度 */
}

nav {
  /* 自定义nav样式，示例： */
  background-color: #f0f0f0;
  padding: 1rem;
}

.grid-container {
  /* 占满剩余空间，内容溢出时自动显示滚动条 */
  background-color: #e0e0e0;
  overflow-y: auto;
}

原理：grid-template-rows: auto 1fr中，auto让nav根据自身内容自动调整高度，1fr则强制grid-container占据所有剩余空间；min-height:100vh避免body因内容不足缩小。

方法二：Flex布局 #

通过Flex的弹性分配实现剩余空间填充：

/* 重置body默认边距，设置为垂直方向的Flex容器 */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

nav {
  /* 自定义nav样式，示例： */
  background-color: #f0f0f0;
  padding: 1rem;
  flex-shrink: 0; /* 可选，防止nav被内容压缩 */
}

.grid-container {
  /* 弹性占据剩余所有空间 */
  flex: 1;
  background-color: #e0e0e0;
  overflow-y: auto;
}

原理：flex-direction: column让元素垂直排列，flex:1给grid-container分配所有剩余空间；min-height:100vh保证body高度至少覆盖视口。

为什么之前的方法失效？ #

• height:100%：需要父元素明确设置高度才会生效，若body未指定高度，该属性无法触发预期效果。
• 100vh：直接取视口高度，加上nav自身的高度后，总高度会超过视口，导致内容溢出。

内容的提问来源于stack exchange，提问作者Juan Pablo Ramos