如何让Grid容器保持在浏览器90vh高度内不溢出？

阿华AIGC实验室

2026-5-9

解决Grid容器溢出Flex容器的问题

嘿，我帮你排查了下问题，主要是布局结构的小细节没处理好，咱们一步步调整就能解决Grid容器溢出屏幕的问题～

问题根源

你原来的.mainpage没有设置为Flex容器，虽然手动给.container设了height:90%，但结合浏览器默认的body边距、Grid内部内容的排版，很容易出现高度计算偏差，导致内容溢出屏幕。另外，没有给容器设置溢出处理，内部内容超出时就会撑破容器。

具体修改方案

1. 把`.mainpage`改成垂直方向的Flex容器

这样能自动让导航栏和内容容器分配屏幕高度，不用手动计算10vh和90vh，避免计算误差：

.mainpage{
  width: 100%;
  height: 100vh;
  background-image: url("./images/background.jpg");
  background-size:cover;
  background-position: top center;
  display: flex; /* 新增：启用Flex布局 */
  flex-direction: column; /* 新增：垂直排列子元素 */
  margin: 0; /* 去掉默认body边距带来的溢出 */
  padding: 0;
}

2. 固定导航栏高度，防止被压缩

给.nav加上flex-shrink:0，确保它始终保持10vh高度，不会被内容容器挤压：

.nav{
  position: sticky;
  top:0;
  background-color: rgba(255,255,255,.5);
  overflow: hidden;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  height: 10vh; /* 明确固定高度 */
  flex-shrink: 0; /* 新增：禁止导航栏被压缩 */
}
.nav *{
  line-height: 10vh;
  height: 100%; /* 改成继承父元素高度，避免额外溢出 */
}

3. 让内容容器占满剩余空间，并处理溢出

用flex:1替代原来的height:90%，让.container自动占满.mainpage的剩余空间，同时添加overflow:auto，当Grid内容超出高度时，在容器内显示滚动条，而不会溢出屏幕：

.container{
  flex: 1; /* 新增：占满剩余空间 */
  width: 100%;
  display: flex;
  overflow: auto; /* 新增：内容超出时滚动 */
}

4. 优化Grid容器的排版细节

确保.pageone占满父容器，同时简化Grid模板的写法，避免不必要的高度偏差：

.pageone{
  display: grid;
  height: 100%;
  width: 100%; /* 新增：占满.container宽度 */
  grid-template-columns: repeat(7, 1fr); /* 简化重复列的写法 */
  grid-template-rows:2% repeat(3, 1fr) 2%; /* 简化重复行的写法 */
  grid-template-areas: 
    ". . . . . . ."
    ". hero hero . . . ."
    ". hero hero . . . ."
    ". hero hero . text text ."
    ". . . . . . ." ;
  margin: 0;
  padding: 0; /* 去掉默认边距，避免撑开容器 */
}