页脚需设为body直接子元素并用flex布局推至底部，body必须用min-height:100vh而非height:100vh，footer加margin-top:auto且禁用absolute，文字用rem+clamp响应式，三栏场景需将footer移入对应容器内。
页脚在响应式布局里不是“写完就跑”，而是最容易暴露结构缺陷的环节——多数错位、悬空、重叠、文字挤成一团的问题，根源都在语义结构或 flex 基准没设对。
body 必须设 min-height: 100vh 而非 height: 100vh
这是最常被跳过的前提。如果只写 height: 100vh，当内容超过一屏时，body 会被强制截断，页脚直接被撑出视口底部；而 min-height: 100vh 表示“至少占满一屏，但允许更高”，才能兼顾短页贴底、长页正常滚动。
- 不加这行，
flex: 1和margin-top: auto全部失效 - 别信“Chrome DevTools 里看着没问题”——真机 Safari 在地址栏收起/展开时会触发
100vh动态变化，导致页脚跳动 - 同时清掉
body默认margin：margin: 0，否则顶部/底部多出空白
footer 必须是 body 的直接子元素且用 flex 推到底部
把 footer 放进某个 .main 或 .content 容器里，等于主动放弃语义与布局控制权。它得和 header、main 并列，才能被 body 的 flex 规则统一调度。
- 正确结构：
<header>...</header><main>...</main><footer>...</footer> - 关键 CSS：
#footer { margin-top: auto; }—— 不是margin-bottom: auto（后者无效），也不是position: absolute（脱离流、遮挡内容） - 如果页脚需要固定高度（比如 60px），加
flex-shrink: 0防止被压缩；否则让它自然包裹内容更安全
移动端文字堆叠和间距崩坏，本质是单位没换
用 px 写 padding、font-size、line-height，等于给响应式埋雷。iPhone SE 屏宽仅 375px，16px 字体+20px 内边距会立刻顶满屏幕。
- 页脚内文字优先用
rem：font-size: 0.875rem（即 14px @16px root），再配合clamp()平滑过渡：font-size: clamp(0.75rem, 4vw, 0.875rem) - 行内元素（如邮箱、电话）用
display: block+margin-bottom: 0.5rem控制垂直节奏，别依赖<br>
- 避免
width: 100%硬撑——页脚默认就是块级、铺满父容器宽度；加了反而可能因 box-sizing 或 padding 触发横向滚动条
三栏/侧边栏场景下页脚定位错乱？检查 .right 是否设了 flex
当页脚要钉在右侧黑色区域（如 .right）底部，而不是整页底部，说明它根本不是全局 footer，而是局部区块的底部容器。此时强行套用 body flex 方案只会失效。
- 必须把
<footer></footer>移入.right内部，成为其直接子元素 -
.right需设display: flex; flex-direction: column;，页脚加margin-top: auto; - 别给
.right设height: 100%—— 它高度由内容决定，flex 才能识别“剩余空间” - 若
.right高度不确定（比如含动态加载内容），用min-height: calc(100vh - headerHeight - footerHeight)是危险操作，应改用flex自适应
真正卡住人的从来不是“怎么写页脚”，而是没意识到：页脚的位置，是整个页面 DOM 结构、CSS 流向、视口基准三者共同作用的结果。少设一个 min-height，少移一个 margin，少改一个单位，它就会在某台手机上突然消失或重叠——这些细节，不跑真机、不缩放测试、不关掉模拟器，根本看不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
