用 position: absolute 做不好粘性页脚，因其脱离文档流、不参与高度计算，导致内容少时页脚居中、内容多时被顶出或遮挡；可靠方案是 min-height: 100vh + flex 布局，让 main flex: 1 填满剩余空间，将 footer “挤”到底部。
为什么 position: absolute 做不好粘性页脚
直接给 footer 加 position: absolute; bottom: 0; 看似简单，但几乎总会出问题：内容少时页脚压在中间，内容多时页脚被顶到页面下方、甚至遮挡正文。根本原因是 absolute 脱离文档流，不参与高度计算，父容器又没设明确高度约束——它只是“贴在父容器左上角或右下角”，不是“贴在视口底部”。
真正需要的是：页脚始终在内容之后、且当内容不够高时，自动撑到视口底边。
用 min-height: 100vh + flex 更可靠
现代方案不依赖绝对定位，而是靠弹性布局控制整体结构。核心思路是让页面容器最小占满整个视口，再把页脚“推到底部”。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
html和body都要设height: 100%;或margin: 0;，避免默认边距干扰 - 主容器（比如
<div class="page">）设 <code>display: flex; flex-direction: column; min-height: 100vh; - 正文区域（
main）加flex: 1;，它会自动填满剩余空间，把footer“挤”到最底下
<div class="page">
<header>...</header><main>...</main><footer>...</footer>
</div>
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
如果非要用 position: absolute，必须配合固定父容器高度
只有当你明确知道页面主体高度恒定（比如后台管理页、弹窗内嵌页），才考虑绝对定位。否则极易失控。
- 父容器（如
body或某个 wrapper）必须设position: relative;和明确高度（例如height: 100vh;） -
footer设position: absolute; bottom: 0; width: 100%;，但要注意：它会覆盖内容，需给主体留出 footer 高度的padding-bottom或margin-bottom - 若主体内容动态增减，这个留白就容易错位——这就是它不适合通用页脚的原因
兼容性与移动端要注意的细节
100vh 在 iOS Safari 中曾有 viewport 缩放导致高度计算异常的问题（比如地址栏收起/展开时），虽已大幅改善，但仍建议：
- 用
min-height: -webkit-fill-available;作为min-height: 100vh;的降级补充 - 避免在
footer上设height固定值，改用min-height或靠内容自然撑开 - 如果页脚含交互元素（按钮、链接），确保其在 iOS 上可点击——绝对定位有时会因 z-index 或 pointer-events 丢失响应
真正麻烦的从来不是怎么写那几行 CSS，而是想清楚：页脚属于内容流的一部分，还是纯粹的视觉锚点。前者用 flex，后者才考虑 absolute——别一上来就锁死 bottom。
