absolute元素脱离文档流导致父容器高度塌陷，body仅剩边框或内边距高度，造成底部大片空白；应改用flex布局（min-height: 100vh + margin-top: auto）或确保有正常流兄弟元素撑高父容器。
absolute元素撑不开父容器，导致body高度塌陷
页面滚动到底部却看到大片空白，不是footer没写好，而是position: absolute元素脱离文档流后，父容器高度变成0——尤其当它是唯一内容子项时。body或主容器实际高度只剩边框、内边距或空文本节点那点厚度，浏览器就按这个高度渲染，下面全是“真空区”。
常见现象：用position: absolute把轮播图、弹窗、侧边栏定位后，页脚直接贴到视口顶部，或者整个页面可无限向下滚动但什么都没有。
- 检查父容器是否设置了
height、min-height或overflow: hidden——这些会掩盖塌陷，但不解决根源 - 确认该
absolute元素是否本应参与高度计算（比如它是主要内容区块），那就不能用absolute，得换relative+transform或flex布局 - 若必须用
absolute（如浮层、遮罩），请确保有另一个正常流内的兄弟元素撑高父容器，或给父容器设min-height: 100vh
fixed定位页脚被拉到顶部，反而加剧底部空白
有人发现position: fixed; bottom: 0能让页脚“粘底”，但页面一长，页脚就悬浮在半空，正文内容滚走后，页脚下方露出巨大空白——因为fixed完全脱离文档流，body高度仍由其他内容决定，而页脚不再贡献任何高度。
这不是bug，是fixed的语义：它锚定视口，不参与布局流。你看到的“底部空白”，其实是body真实高度结束后的留白。
- 别用
fixed替代页脚布局；真正需要“始终可见”的场景才用它（如导航条） - 想让页脚“随内容沉底”，用
display: flex; flex-direction: column; min-height: 100vh+margin-top: auto更可靠 - 如果已用了
fixed页脚，记得给body加padding-bottom（值等于页脚高度），避免正文被遮挡
relative定位+负边距是隐藏的空白制造机
position: relative本身不脱离文档流，但配合top: -100px或margin-top: -200px，会让元素视觉上移，原始占位空间还在——就像把一张纸往上拽，下面空出一大块，但纸的“影子”还压在那里。
这种写法在多屏适配时尤其危险：负值在小屏下可能把元素拽出视口，而占位高度却因字体缩放、行高变化变得不可预测。
- 删掉所有
position: relative+ 大幅top/right/bottom/left组合 - 负边距慎用，仅限微调（如-5px以内），且必须确认不会破坏兄弟元素的
margin collapse - 想居中？用
text-align: center、flex或grid；想错位？用transform: translate()（不占位）
用100vh和flex-column做“真·撑满”布局
height: 100vh不是万能解药——它只让单个元素填满视口，但如果该元素内部有absolute子项，它照样塌陷；而且移动端 Safari 对vh的处理常把地址栏高度算进去，导致溢出或截断。
真正稳定的做法是用flex建立垂直流：父容器设display: flex; flex-direction: column; min-height: 100vh，页脚加margin-top: auto，这样它会自动“沉”到底部，且不依赖绝对定位。
-
min-height: 100vh比height: 100vh更安全，内容超长时不会出现双滚动条 - 页脚不要设
position: absolute或fixed，否则margin-top: auto失效 - 如果页脚需响应式隐藏/显示，用
visibility: hidden或display: none，别用opacity: 0+pointer-events: none——后者仍占文档流空间
最易被忽略的一点：问题往往不在页脚本身，而在它上面某个用了position: absolute的模块——那个模块的父容器没高度，整段内容就“悬空”了。查空白，先查computed position和height，而不是盯着页脚样式改来改去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
