网站Footer底部存在巨大空白问题排查求助（附CSS代码）

核心问题定位 #

你的Footer下方出现大面积空白，主要原因在于：

• .footer设置了height:16%，但百分比高度必须依赖父元素的明确高度才能生效。当前全局样式中html、body未设置完整视口高度，导致这个百分比高度无法正确计算，进而引发布局异常。
• 页面布局未让内容区域占满视口剩余空间，Footer无法固定在视口底部，下方自然出现空白。

具体修复步骤 #

1. 修复根元素高度 #

在全局CSS中给html和body添加最小高度，确保它们占满整个视口：

html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

2. 调整Footer高度设置（二选一） #

方案A：移除百分比高度（推荐）

百分比高度在这种场景下极易引发布局问题，建议换成自适应高度或固定高度：

.footer {
    color: #ffffff;
    padding: 1.5rem 0;
    text-align: center;
    transition: background-color 0.3s ease;
    /* 移除height:16%，改用自适应内容高度 */
    height: auto;
    border: 15px solid red;
}

方案B：保留百分比高度（需配套布局调整）

如果一定要用百分比高度，需要通过Flex布局让父容器明确高度，并让内容区域占满剩余空间：

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

/* 假设页面内容包裹在main标签中，让它占满视口剩余空间 */
main {
  flex: 1;
}

.footer {
  height: 16%;
}

3. 排查额外空白来源 #

• 用浏览器开发者工具（F12）选中空白区域，检查是否有隐藏元素、额外的padding/margin在Footer之后。
• 确认是否有其他CSS规则意外修改了body或Footer的布局属性。

验证修复 #

应用修改后刷新页面，查看Footer下方空白是否消失。若问题仍存在，检查是否有动态生成元素添加了额外空间，或其他样式规则覆盖了当前设置。

内容的提问来源于stack exchange，提问作者Enmanuel De Los Santos Cruz