footer没贴底需先确保html和body设height:100%，再用flex布局：body设display:flex、flex-direction:column、min-height:100vh，main设flex:1，footer自然沉底；禁用fixed避免遮挡内容与可访问性问题。
Footer 被内容顶上去，没贴底怎么办？
常见原因是父容器（比如 body 或 html）高度不足，导致 position: fixed 或 position: absolute 失效或错位。必须确保根元素撑满视口高度。
最稳妥做法是给 html 和 body 显式设高：
html, body {
height: 100%;
margin: 0;
}
再配合 min-height: 100% 的主容器（如 .wrapper），避免内容少时 footer 悬空。
用 position: fixed 还是 position: absolute？
fixed 让 footer 始终钉在视口底部，不随滚动移动，适合全局导航类 footer；absolute 是相对最近的定位祖先定位，适合“文档流底部”——即内容结束后再贴底。
选哪个取决于需求：
- 要始终可见（如版权条、快捷入口）→ 用
position: fixed，并加bottom: 0和width: 100% - 要等所有内容渲染完才出现在页面最底端 → 用
position: absolute，但父容器必须position: relative且min-height: 100vh - 用
fixed时记得给main或content加padding-bottom，否则内容会被 footer 遮住
Flexbox 方案为什么更推荐？
现代布局中，display: flex + flex-direction: column 是最干净的解法，无需计算高度、不依赖定位，天然支持内容自适应。
关键点只有三步：
- 给根容器（如
body）设display: flex和flex-direction: column - 给主要内容区域（如
main）加flex: 1，它会自动撑满剩余空间 -
footer默认就在 flex 容器末尾，自然贴底
示例结构：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
main {
flex: 1;
}
footer {
/* 无需额外定位 */
}
移动端或内容超长时 footer 跑到中间？
这是 flex: 1 在某些旧版 Safari 或 Android WebView 中失效的典型表现，本质是未触发 flex 主轴伸缩。
两个补救动作：
- 给
main加min-height: 0（防止 flex item 最小高度干扰伸缩） - 给
body或容器加height: 100vh（而非仅min-height），强制高度基准 - 若仍异常，可改用
grid：display: grid; grid-template-rows: 1fr auto;，兼容性略好于 flex 的极端 case
真正容易被忽略的是：footer 是否设置了 margin-top: auto —— 在 flex 容器里，这比 flex: 1 更直接地把它推到底部，且对子元素数量不敏感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
