footer 不会自动定位到底部，需通过 flex 布局（父容器设 display: flex、min-height: 100vh，main 设 flex: 1）实现粘性底部，避免 fixed/absolute 误用及 vh 失准问题。
footer 在 HTML 中不是自动定位到底部的
很多人以为写个 <footer></footer> 标签，浏览器就会把它“钉”在页面最底下——其实不会。<footer></footer> 只是语义化标签，它不带任何默认定位逻辑，渲染位置完全取决于它在 DOM 中的位置和 CSS 布局行为。
常见错误现象：<footer></footer> 紧跟在 <main></main> 后面，但内容少时 footer 悬在页面中间；加了 position: fixed 后遮挡内容或不随滚动；用 margin-top: auto 却没生效——基本都是因为父容器没设高度或没启用 Flex/Grid 布局。
- 必须确保父容器（比如
或一个包裹<header></header>/<main></main>/<footer></footer>的<div>）有明确高度控制逻辑<li>推荐用 Flex 布局：给父容器设 <code>display: flex+flex-direction: column，再给<main></main>加flex: 1，<footer></footer>就会自然撑到底部 - 避免对
<footer></footer>单独设position: absolute或fixed，除非你明确需要悬浮/吸底且已处理好内容被遮挡问题
用 Flex 实现“粘性底部”的最小可行代码
这是目前最稳定、兼容性够用（IE11+）、不需要 JS 的方案。核心不是 footer 本身，而是它和兄弟元素的协作关系。
<body style="margin: 0; min-height: 100vh; display: flex; flex-direction: column;"> <header>页头</header> <main style="flex: 1;">主要内容</main> <footer>页脚</footer> </body>
注意点：
立即学习“前端免费学习笔记（深入）”；
-
min-height: 100vh是关键，不是height: 100vh——否则内容超长时 footer 会被挤出视口 -
<main></main>必须存在且设flex: 1（等价于flex: 1 1 auto），不能省略或用其他元素替代 - 如果用了 CSS Reset 或 Normalize，检查
body的margin是否被清零，否则顶部/底部可能留白
当页面有固定头部时 footer 容易顶到内容下面
比如加了 position: sticky 的导航栏，或者 position: fixed 的 header，footer 会无视它们的存在，直接从视口顶部开始叠放。
解决思路不是调 footer，而是预留空间：
- 如果 header 高度固定（如 60px），给
<main></main>加margin-top: 60px，同时确保父容器的padding-top不为 0（否则 margin 会塌陷） - 更稳妥的做法：把 header 也放进 Flex 容器里，用
flex-shrink: 0锁定高度，这样整个布局仍可控 - 不要用
calc(100vh - 60px)给<main></main>设高度——移动端键盘弹出、地址栏缩放都会让vh失准
footer 里的链接和版权信息要兼顾可访问性
语义上 <footer></footer> 没问题，但实际使用中容易忽略两点：
- 内部链接别只靠颜色区分，至少加下划线或
text-decoration: underline，否则色弱用户难识别 - 版权年份别手写死，用 JS 动态生成（
© <script>document.write(new Date().getFullYear())</script>）虽简单，但 SSR 或禁 JS 场景会失效；更稳的是构建时注入或服务端渲染 - 如果 footer 包含联系邮箱或电话，确保用
mailto:/tel:协议，而不是纯文本——不然移动端点不了
真正麻烦的从来不是怎么写 <footer></footer>，而是它在不同内容长度、不同设备、不同交互状态下的表现一致性。多测几种情况：空内容页、长文章页、弹出键盘后的表单页——footer 往往在这些边缘场景露馅。
