应使用CSS变量统一管理页脚高度，如:root{--footer-height:60px;}，页脚设height:var(--footer-height)，主内容加padding-bottom:var(--footer-height)，响应式时用媒体查询覆盖变量值。
fixed定位页脚时，内容被遮挡怎么办
直接原因是 position: fixed 让页脚脱离文档流，而主内容没留出足够底部空间，滚动到底部时就被盖住了。这不是“加个 margin-bottom 就完事”的问题——得看谁来撑这个空。
- 如果用
body或main元素加padding-bottom，值必须严格等于页脚高度（含边框、内边距），否则要么遮挡，要么留白过多 - 更稳的做法是让页脚自己“告诉”上面的内容：“我高 X px”，这就需要 CSS 变量介入
- 别在页脚上直接写死
height: 60px后又在别处重复写padding-bottom: 60px——改一次漏一处，早晚出错
用 --footer-height 统一管理偏移量
CSS 变量不是炫技，是为了解耦。把页脚高度抽成变量后，所有依赖它的地方都能自动响应变化。
- 在 :root 或页脚父级定义：
:root { --footer-height: 60px; } - 页脚自身设置：
height: var(--footer-height); - 主内容区域（比如
main）加：padding-bottom: var(--footer-height); - 如果页脚有响应式高度（如移动端变矮），就用媒体查询覆盖变量：
@media (max-width: 768px) { :root { --footer-height: 48px; } }
fixed 页脚 + flex 布局的常见冲突
很多人用 display: flex; flex-direction: column; 做全屏布局，再给页脚 margin-top: auto，结果和 position: fixed 一起用就失效——因为 fixed 元素不参与 flex 排列。
- 要么放弃 fixed，改用 sticky（
position: sticky; bottom: 0;），但要注意父容器不能有overflow: hidden - 要么保留 fixed，但必须手动控制内容区最大高度：
main { max-height: calc(100vh - var(--footer-height)); } - 别忘了考虑浏览器地址栏在移动端的隐藏/显示行为，
100vh在 Safari 上可能不准，稳妥点可用100dvh（支持较新）
为什么不用 JavaScript 动态算高度
能用纯 CSS 解决的，就别引入 JS。监听 resize 或 orientationchange 算页脚高度，看似灵活，实则埋坑。
立即学习“前端免费学习笔记（深入）”；
- 页面加载时 JS 还没执行，页脚先闪一下遮住内容
- 字体加载、图片加载、广告注入都可能改变页脚真实高度，JS 很难全覆盖监听
- CSS 变量配合 calc() 和自定义属性继承，天然支持响应式与主题切换，JS 方案反而要额外维护状态
- 真有动态内容导致高度突变（比如展开的客服浮层），优先考虑用
transform: translateY()临时位移页脚，而不是重算整个布局
最麻烦的其实是页脚里嵌了绝对定位元素（比如右下角的返回顶部按钮），它们会以页脚为参考系，一旦页脚高度靠变量控制，这些子元素的 bottom 或 top 值也得跟着用 calc() 配合变量调整——这点容易漏，一动全乱。
