求助：滚动页面时Footer无法固定在底部的CSS问题

现有代码的问题分析 #

• position: absolute：若父容器（如body或外层容器）未设置position: relative，Footer会相对于整个文档定位；当页面内容超过视口高度时，滚动页面Footer会随内容上移，无法固定在视口底部。
• position: sticky：该属性仅在元素滚动到指定位置时才会固定，且依赖父容器的滚动空间，无法实现“始终固定在视口底部”的需求。

方案一：直接使用position: fixed（最简单的固定底部实现） #

该方案让Footer始终固定在视口底部，不受页面内容滚动影响：

.footer{
  position: fixed; /* 替换absolute为fixed，固定在视口底部 */
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: rgba(3, 3, 3, 0.8);
}

/* 小屏幕适配调整（按需修改） */
@media (max-width: 800px) {
  .footer{
    height: 80px; /* 示例：缩小移动端Footer高度 */
  }
}

注意：使用fixed后，页面底部的内容会被Footer遮挡，需给页面主内容区添加padding-bottom: 100px（数值与Footer高度一致），避免内容被隐藏。

方案二：Flex布局实现粘性底部（内容不足时在视口底部，内容过长时在页面最底部） #

如果需要兼顾两种场景：页面内容较少时Footer固定在视口底部，内容超过视口高度时Footer跟随页面滚动到最底部，可采用Flex布局：

/* 先给根元素和body设置基础样式 */
html, body {
  height: 100%;
  margin: 0;
}

/* 假设页面结构为：<div class="page-container"> 包含主内容和Footer */
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1; /* 让主内容占满剩余空间，把Footer挤到底部 */
}

.footer{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  background-color: rgba(3, 3, 3, 0.8);
}

/* 小屏幕适配 */
@media (max-width: 800px) {
  .footer{
    height: 80px;
  }
}

该方案无需额外处理内容遮挡问题，且完全适配不同内容长度的页面场景。

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