页脚不贴底的主因是父容器高度未撑满：需设 html 和 body 的 height: 100% 或 min-height: 100%，避免 vh 失效；移动端优先用 min-height: 100vh；绝对定位页脚须配合相对定位父容器；推荐 flex 布局（body flex-column + main flex:1 + footer margin-top:auto）更稳定可靠。
页脚不贴底？检查 body 和 html 的 height 设置
很多情况下页脚悬在半空，不是因为定位写错了，而是 html 和 body 默认没撑满视口高度。CSS 中 min-height: 100vh 看似够用，但若父级（比如 body）本身高度不足，子元素的 100vh 就会失效。
-
html和body都得设height: 100%或min-height: 100%，否则vh单位在某些嵌套下会“失准” - 移动端 Safari 对
vh有兼容问题（地址栏收放时值会变），稳妥起见优先用min-height: 100vh而非height: 100vh - 如果页面内容极少，又用了
position: absolute把页脚钉在底部，但没给容器设position: relative，页脚就会相对于 viewport 定位，脱离文档流后可能遮挡内容
用 absolute 定位页脚？必须配一个相对定位的包裹容器
直接对 footer 设 position: absolute; bottom: 0 是常见做法，但它依赖父容器是定位上下文。否则它会上溯到 html，导致在滚动长页面时页脚始终贴窗底、不随内容走。
- 把
footer放进一个main或content区域，并给这个区域设position: relative - 同时该容器需有足够高度——通常配合
min-height: calc(100vh - footer高度)，但更推荐用flex方案（见下一条） - 绝对定位的页脚无法自动“推高”容器高度，所以不能靠它来撑开布局；它只是视觉上“贴底”，实际文档流中已被抽离
更稳的方案：Flex 布局 + margin-auto 推页脚到底部
比起绝对定位，用 display: flex 和 margin-top: auto 是目前最可靠、语义清晰、无需计算高度的方式。它天然支持内容少时页脚沉底，内容多时正常流式排列。
-
body设display: flex; flex-direction: column; min-height: 100vh -
main（或主要内容区）设flex: 1，它会自动填满剩余空间 -
footer不加任何定位，靠margin-top: auto自动“挤”到底部 - 注意：IE10–11 对
flex: 1解析不稳定，如需兼容，改用flex: 1 0 0并确保父容器有明确min-height
滚动时页脚突然上浮？可能是 transform 或 overflow 触发了新层叠上下文
有些页面加了 transform: translateZ(0) 或 overflow: hidden 在某一层，意外创建了新的层叠上下文或格式化上下文，导致 position: absolute 的页脚参照错位。
- 检查页脚父容器是否被加了
transform、filter、will-change或overflow（非 visible） - 这类属性会让元素变成“定位根元素”，
absolute子元素就不再相对于body，而相对于它定位 - 临时排查方法：给疑似容器加
outline: 1px solid red，看页脚是否还在它的边界内
页脚紧贴底部这件事，表面是定位问题，实际常卡在父容器高度传递断裂、层叠上下文干扰、或移动端 vh 动态变化上。真正难调的不是那几行 CSS，而是得一层层往上查“谁没把自己撑开”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
