CSS页脚定位问题：无法固定在页面底部

你当前使用position: absolute定位页脚但未达到预期效果，核心原因是absolute定位依赖最近的非static定位父元素，若html和body未设置合适的高度与定位属性，页脚不会相对于视口底部对齐。以下分两种场景给出针对性解决方法：

场景一：页脚始终固定在视口底部（滚动时不消失） #

如果需要页脚一直显示在浏览器窗口底部，不受页面滚动影响，直接将position: absolute替换为position: fixed即可：

footer {
    position: fixed; /* 替换原absolute属性 */
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background-color: black;
    color: #fff;
    padding: 10px 0;
    font-size: small;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 可选：避免页面底部内容被页脚遮挡 */
body {
    padding-bottom: 60px; /* 值需匹配页脚实际高度 */
}

场景二：粘性页脚（内容短则贴底，内容长则随页面到底部） #

如果希望页脚在页面内容不足时固定在视口底部，内容超出视口时自动推到页面最下方，推荐用Flex布局实现（目前最稳定的粘性页脚方案）：

1. 先给html和body设置基础样式，将其转为Flex容器：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

2. 给页面主内容容器添加flex: 1，让它自动占据剩余空间：

.main-content { /* 替换为你实际的主内容容器类名 */
    flex: 1;
}

3. 页脚保留原有样式（无需absolute定位）：

footer {
    text-align: center;
    background-color: black;
    color: #fff;
    padding: 10px 0;
    font-size: small;
    display: flex;
    flex-direction: column;
    align-items: center;
}

设置完成后，主内容区会自动填充页面剩余空间，页脚会被自然推到页面底部，适配所有内容长度场景。

内容的提问来源于stack exchange，提问作者Mango Refresher