结论：90%移动端底部留白源于body未设height:100vh，导致grid/flex的1fr或flex:1失效；因html默认高度在移动端不可靠，100vh不依赖父级且兼容性好，须同步清除body默认margin。
直接给结论：90% 的移动端底部留白，不是 JS 或内容问题，而是 body 没设 height: 100vh，导致 grid 或 flex 中的 1fr / flex: 1 失效。
为什么 body 必须设 height: 100vh 而不是 min-height: 100%
100% 高度依赖父元素（html）有明确高度；而移动端浏览器对 html 的默认高度处理不一致，尤其在 Safari 和部分 Android WebView 中，html { height: 100% } 可能被忽略或计算为 0。此时子元素的 100% 就是 0，min-height: calc(100% - 50px) 也等于 0，整个内容区塌缩，footer 被挤出视口下方，形成“可滚动但空”的底部留白。
-
100vh是绝对视口单位，不依赖父级，所有现代浏览器（包括 iOS Safari 15.4+、Chrome 64+）都可靠支持 - 别用
min-height: 100vh—— 它只在内容少于视口时生效，内容多时无法撑开，仍可能留白 - 必须同步加
margin: 0，否则部分浏览器（如旧版 UC）会保留默认bodymargin，引入额外偏移
grid-template-rows: auto 1fr auto 失效的典型表现
你写了 display: grid 和 grid-template-rows: auto 1fr auto，本意是让中间内容区自适应填满剩余空间。但若 body 高度未定义，1fr 就没基准可分——它会被解析为 0px，.content 区域实际高度为 0，视觉上“消失”，footer 直接贴着 header 渲染，页面整体高度由其他元素（比如一个 padding-top: 140px）撑开，造成底部大片空白。
- 检查开发者工具中
body的「Computed Height」，如果是auto或远大于视口高度，就是这个原因 - 删掉
min-height: auto—— 它无意义，且会干扰height: 100vh的优先级 -
.content里别再写min-height: calc(100% - 50px)，这种嵌套百分比在移动端极易失效，直接交给1fr管理
浮动或定位滥用导致的“幽灵高度”
如果页面里大量用了 position: relative 配合 right: -2000px、margin-top: -3500px 这类极端偏移，即使元素不可见，它们仍在文档流中占据原始位置高度。浏览器会把这部分“幽灵高度”算进 body 总高，滚动到底部看到的其实是这些被拖走的元素留下的空白区域。
- 临时用
* { position: static !important; margin: 0 !important; }测试：刷新后若空白消失，说明是定位滥用 - 不要用
overflow: hidden强行裁剪——它可能截断弹窗、下拉菜单等绝对定位内容 - 重构优先级：用
display: flex或display: grid替代手动位移，语义容器包裹重复区块（如门店列表），再用justify-content: center或grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))响应式排列
真正容易被忽略的是：这个问题往往只在真机或模拟器中复现，桌面 Chrome DevTools 的“Responsive Design Mode”有时会掩盖 100vh 在软键盘弹出/地址栏收起时的高度波动。上线前务必用真机测试横竖屏切换和输入框聚焦场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
