页面内容不足时将页脚固定在底部的实现方案咨询

你当前的flex布局已经具备实现需求的基础，只需调整以下样式即可：

• 给.footer-container添加margin-top: auto，同时移除原有的margin: auto 0（上下方向的auto会干扰flex布局的空间分配）
• 父容器.parent-container无需修改justify-content，默认的flex-start即可满足需求

修改后的完整代码：

.footer-container {
  width: 100%;
  height: 20vh;
  background-color: #1b1b1b;
  position: relative;
  margin-top: auto; /* 核心：自动填充上方剩余空间，将页脚推至底部 */
}

.parent-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

实现原理 #

父容器设置min-height: 100vh确保容器至少占满视口高度，结合flex-direction: column的垂直排列规则：

• 当页面内容总高度不足100vh时，margin-top: auto会让页脚自动占据容器顶部到内容下方的剩余空间，从而固定在视口底部
• 当内容高度超过100vh时，页脚会自然跟随内容排列在页面最底端，不会固定在视口内阻碍内容查看

（补充：你提供的截图显示内容较短时，页脚未固定在页面底部，而是停留在内容下方的中部位置）

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