如何合并两个CSS Grid为单个主网格，实现banner撑满视口底部

实现方案 #

核心思路是直接将<body>作为唯一主网格容器，配合min-height: 100vh保证网格最小高度铺满视口，通过行高规则实现需求，无需嵌套多个网格容器。

调整后CSS代码

/* 基础样式重置，避免默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  /* 全局唯一主网格 */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 行高规则：自适应header、自适应导航、占满剩余视口的banner、后续自适应内容行 */
  grid-template-rows: max-content max-content 1fr repeat(2, max-content);
  grid-template-areas: 
    "header header header header header"
    "navbar navbar navbar navbar navbar"
    "banner banner banner banner banner"
    "content content content content content"
    "footer footer footer footer footer";
  /* 最小高度铺满视口，内容溢出时自动撑高 */
  min-height: 100vh;
}
/* 给对应元素分配网格区域 */
#header { grid-area: header; }
#nav-main { grid-area: navbar; }
#banner { grid-area: banner; }
#content { grid-area: content; }
#footer { grid-area: footer; }

简化后HTML代码

无需嵌套两个独立网格容器，所有内容直接放在body下即可：

<body>
  <header id="header">
      Header
  </header>
  
  <nav id="nav-main">
      1 2 3 4 5
  </nav>

  <section id="banner">
      <div id="presentation">
          <div class="slide">
              Slide 1
          </div>
      </div>
  </section>

  <section id="content">Content</section>
  <footer id="footer">Footer</footer>
</body>

效果验证

• header、导航高度完全由内容决定，无需声明固定值
• banner默认占满header+导航之外的所有视口高度，始终对齐视口底部
• content、footer自动排在banner之后，默认从视口下方开始渲染，滚动即可查看
• 后续新增行只需在grid-template-rows末尾添加max-content，同步更新grid-template-areas即可，逻辑完全统一

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