实现主内容区重叠页眉页脚的理想布局？解决容器高度自适应问题

核心问题是绝对定位元素脱离文档流，导致容器无法感知主内容区高度，无法自适应。以下是两种可行解决方案：

方案一：负边距+内边距（兼容旧浏览器） #

修正后的HTML代码 #

<div class="container">
     <div class="section-1">页眉内容</div>
     <div class="section-2">主内容区</div>
     <div class="section-3">页脚内容</div>
</div>

对应的CSS代码 #

html, body {
  height: 100%;
  margin: 0;
}
.container {
  min-height: 100%;
}

.section-1 {
  min-height: 35vh;
  background-color: #1B80CE;
}
.section-2 {
  height: 400px;
  width: 80%;
  margin: -200px auto 0; /* 向上偏移200px，实现与页眉重叠 */
  background-color: white;
  position: relative;
  z-index: 10; /* 确保主内容区在页眉页脚上方 */
}
.section-3 {
  min-height: 65vh;
  background-color: #E8EBF0;
  padding-top: 200px; /* 预留主内容区高度，避免内容被遮挡 */
}

说明：将主内容区改为相对定位，通过负边距实现与页眉的重叠效果；给页脚添加内边距，避免其内容被主内容区遮挡。此时所有元素都在文档流内，容器会自动自适应高度。

方案二：CSS Grid布局（现代简洁方案） #

HTML代码（同上） #

<div class="container">
     <div class="section-1">页眉内容</div>
     <div class="section-2">主内容区</div>
     <div class="section-3">页脚内容</div>
</div>

对应的CSS代码 #

html, body {
  margin: 0;
  min-height: 100%;
}
.container {
  display: grid;
  grid-template-rows: 35vh auto 65vh;
  min-height: 100%;
}

.section-1 {
  background-color: #1B80CE;
  grid-row: 1;
}
.section-2 {
  height: 400px;
  width: 80%;
  margin: auto;
  background-color: white;
  grid-row: 1 / span 2; /* 让主内容区跨越页眉和页脚上方的行 */
  align-self: center; /* 垂直居中对齐 */
  z-index: 10;
}
.section-3 {
  background-color: #E8EBF0;
  grid-row: 3;
}

说明：利用Grid布局的跨行特性，让主内容区直接跨越页眉所在的行，自然实现重叠；同时所有元素都在文档流中，容器高度会自动适配内容，无需额外处理。

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