如何将页脚固定在页面底部 解决重叠、小视口高度下消失问题

• 给页脚设置position: fixed后元素会脱离正常文档流，不占据布局空间，因此会覆盖在正文、图片等内容上方造成重叠。
• 视口高度低于800px时切position: static后页脚消失，有两个核心诱因：一是选择器优先级不足，样式被覆盖；二是固定定位阶段未给页面主体预留底部占位，同时部分父容器的溢出裁剪规则会把静态定位的页脚挤出可视区域；另外原有固定定位样式未设置left: 0，会导致宽屏下页脚位置偏移。

最优方案（无需媒体查询，全尺寸适配） #

直接使用粘性定位替代固定定位，删除原有针对max-height:800px写的position切换媒体查询，将.footer类的样式修改为如下即可：

.footer {
    background-color: #5A0035;
    box-sizing: border-box;
    width: 1400px;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 50px 50px 60px 50px;
    margin-top: 80px;
    /* 新增粘性定位规则 */
    position: sticky;
    bottom: 0;
}

该方案优势：

• 页脚会自动适配内容长度：内容高度不足一屏时自动贴在视口底部，内容高度超过一屏时跟随文档流排在内容末尾，完全不会出现重叠、消失问题
• 不需要额外给正文加底部留白，粘性定位仍占据正常文档流空间
• 适配所有屏幕尺寸，不需要硬编码高度断点

兼容原有逻辑的修复方案 #

如果需要保留「高屏固定在底部、矮屏随文档流排布」的原有逻辑，做3处修改即可：

1. 提升选择器优先级，补全固定定位的偏移规则，避免位置偏移
2. 给body预留固定页脚的占位空间，避免内容被遮挡
3. 静态定位模式下取消body占位，同时排查父容器不要设置overflow: hidden避免裁剪页脚

对应代码如下：

/* 全局body样式补充 */
body {
    margin: 0;
    padding-bottom: 280px; /* 数值匹配页脚实际高度，可根据渲染效果微调 */
}

/* 替换原有footer标签选择器样式 */
footer.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
}

/* 替换原有max-height媒体查询样式 */
@media (max-height:800px) {
    footer.footer {
        position: static;
    }
    body {
        padding-bottom: 0;
    }
}

注意：如果使用该方案，原有1400px宽度断点、1000px宽度断点的响应式样式不需要改动，即可正常生效。

内容的提问来源于stack exchange，提问作者Elias Barthelemy