如何让HTML页面Footer固定在底部？多页面位置异常求助

云上老周

2026-8-8

问题分析

你遇到的核心问题是Footer仅在部分页面正常显示在底部，其他页面位置偏移，且fixed-bottom无效。原因大概率是页面内容高度不足时，Footer无法被“推”到底部，同时你使用的navbar-fixed-bottom（Bootstrap导航栏固定类）和自定义样式存在冲突，另外CSS里还有属性错误。

修复方案

方案1：Flex布局实现自适应底部（推荐）

这是当前最简洁可靠的固定底部方法，适配所有页面高度情况：

修正并补充全局CSS：

/* 给body设置flex布局，确保页面占满视口高度 */
body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* 让页面主内容区域自动填充剩余空间，把Footer挤到底部 */
.main-content {
    flex: 1;
}

.my_footer {
    background-color:#00FFFF;
    height: 60px;
    width: 100%;
}

.my_footer p {
    padding-top:20px;
    font-size:14px;
    color:#191970; /* 注意：正确属性是color，不是font-color */
}

简化Footer的HTML结构，移除冲突类：

<footer class="my_footer">
    <p class="text-center">&copy; A&A shop pvt ltd.All rights Reserved</p>
</footer>

注意：给页面的主内容容器加上main-content类，比如包裹页面内容的<div class="main-content">...</div>

方案2：绝对定位实现固定底部

如果不想用Flex布局，也可以用绝对定位：

调整CSS：

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding-bottom: 60px; /* 等于Footer高度，避免内容被Footer遮挡 */
}

.my_footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color:#00FFFF;
    height: 60px;
}

.my_footer p {
    padding-top:20px;
    font-size:14px;
    color:#191970; /* 修正属性名 */
}