网页Footer下方巨大空白的修复求助（HTML/CSS）

以下是几个最常见的排查和解决方向，你可以对照自己的代码逐一测试：

• 检查根元素高度设置
  很多时候是因为html和body没有设置正确的高度，导致包含Footer的容器无法撑满视口。给全局样式加上：

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  

  同时把承载页面内容的父容器（比如.container或#page）的高度设置为min-height: 100vh，而不是固定的height: 100%，这样内容超过视口时容器能自动延伸。

• 清除浮动影响
  如果Footer之前的内容模块用了float属性，没有正确清除浮动会导致父容器高度塌陷，Footer的位置被错误推挤。可以给父容器添加clearfix类：

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  

  然后给包含浮动元素的容器加上这个类。

• 排查margin溢出问题
  子元素的margin-bottom有时候会溢出到父容器外面，导致Footer下方多出空白。可以尝试给父容器添加overflow: hidden，或者调整子元素的margin为padding来避免溢出。

• 调整Footer的定位方式
  如果用了绝对定位固定Footer，要确保父容器设置了position: relative，并且给内容区域预留足够的底部内边距，防止内容被Footer遮挡：

  .page-wrap {
    position: relative;
    min-height: 100vh;
  }
  .main-content {
    padding-bottom: 80px; /* 数值等于Footer的高度 */
  }
  footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px; /* Footer实际高度 */
  }
  

你可以先从这些方向入手排查，大部分Footer下方空白的问题都能通过这些方法解决。

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