移除Footer下方空白区域求助（附HTML/CSS代码）

以下是针对Footer下方空白问题的几种解决办法：

1. 重置页面基础样式 #

浏览器默认会给html和body设置边距，这可能导致底部出现空白，先清除这些默认样式：

html, body {
  margin: 0;
  padding: 0;
}

2. 确保Flex布局生效（适配你的margin-top: auto） #

你给Footer设置了margin-top: auto，这需要父容器（通常是body）为Flex布局且占满视口高度，否则Footer无法自动贴合底部，可能留出空白：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

3. 清除Footer自身的底部间距 #

强制移除Footer的底部外边距，避免额外空白：

footer {
  text-align: center;
  font-size: 0.9rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin-top: auto;
  margin-bottom: 0; /* 新增：移除底部外边距 */
}

4. 调整Bootstrap类的内边距 #

你的Footer使用了py-4类（Bootstrap的上下内边距），如果不需要底部内边距，可以替换为pt-4 pb-0，只保留顶部内边距：

<footer class="footer pt-4 pb-0">
  <!-- 内容不变 -->
</footer>

你的原始代码参考： #

CSS代码：

footer {
  text-align: center;
  font-size: 0.9rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin-top: auto;
}

HTML代码：

<footer class="footer py-4">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-4 text-lg-start">Copyright &copy; myWebsite</div>
      <div class="col-lg-4 my-3 my-lg-0">
      </div>
    </div>
  </div>
</footer>

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