前端开发求助：如何修复Footer与页面最后一个Section重叠问题

嘿，我仔细看了你的代码，footer和最后一个section重叠的核心原因有两个：

• 你给每个section都设置了固定的height:100vh，这会强制每个section占满当前视口高度，但当内容实际高度超过100vh（比如移动端屏幕小，文字换行导致内容变高），或者浏览器窗口缩放时，section的内容会溢出，挤压footer的位置。
• 外层的.main-cont只是普通块级元素，没有设置合适的布局规则来让section正常堆叠，也无法让footer自动定位到页面底部。

下面是具体的修复步骤：

1. 调整外层容器布局，实现自适应页面结构 #

修改.main-cont的CSS，用flex布局让它至少占满视口高度，同时让子元素（section和footer）按垂直方向排列：

.main-cont {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保容器至少覆盖整个视口高度 */
}

2. 替换section的固定高度为最小高度 #

把所有section的height:100vh改成min-height:100vh，这样section在内容不足时会占满视口，内容过多时会自动扩展高度，避免内容溢出：

.first-cont {
  min-height: 100vh; /* 替换原来的height:100vh */
}

.second-cont {
  background:url("/images/background2.jpg");
  background-size: cover;
  min-height: 100vh; /* 替换原来的height:100vh */
  width: 100%;
}

.third-cont {
  width: 100%;
  min-height: 100vh; /* 替换原来的height:100vh */
  display: grid;
  grid-template-columns: repeat(2,1fr);
}

3. 让footer自动定位到页面底部 #

给footer添加margin-top: auto，在flex布局中，这个属性会把footer推到容器的最底部，不管前面的section高度如何：

.footer {
  width: 100%;
  height: 300px;
  background-color: white;
  margin-top: auto; /* 关键：将footer固定在页面底部 */
}

完成这些修改后，footer就不会和最后一个section重叠了，同时页面在不同屏幕尺寸下也能自适应内容高度。

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