如何修复移动端视图（mobile view）下页脚（footer）下方的留白问题

问题根因 #

你遇到的移动端页脚下方留白主要由以下几个常见原因导致：

• 未清除浏览器默认给body、html设置的内外边距
• 没有做全局粘性页脚布局，页脚无法始终固定在内容/视口最底部
• 移动端浏览器地址栏折叠/展开导致vh单位计算偏差
• 现有footer仅设置了bottom:0但未指定定位属性，规则不生效

修复步骤 #

1. 先添加全局样式重置+粘性页脚基础布局，将以下代码加到CSS最开头：

/* 全局默认样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 粘性页脚依赖的基础配置 */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* 内容区域自动撑开剩余高度，把页脚推到最底部 */
.container {
  flex: 1 0 auto;
}
/* 页脚设置为不可缩放，原有bottom:0规则可删除 */
footer {
  flex-shrink: 0;
}

2. 若修复后移动端还是偶现留白，是移动端浏览器地址栏导致的vh计算问题，添加以下JS代码修正即可：

// 放在现有JS代码最顶部
function adjustViewportHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
adjustViewportHeight();
window.addEventListener('resize', adjustViewportHeight);

同时把之前CSS里body的min-height: 100vh替换为：

body {
  min-height: calc(var(--vh, 1vh) * 100);
}

其他可优化点 #

你现有JS里有一处拼写错误，var status = document.getElementById("satus");里的id应该是status，对应你HTML里的<div id="status"></div>，否则表单提交后的提示不会正常显示。

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