求助：分辨率变化时Footer无法保持在页面底部的解决方案

当前你的问题源于body采用了flex布局但未设置垂直排列方向，导致修改footer定位时出现异常：fixed会让footer固定在视口底部（内容过长时遮挡内容），relative/absolute因flex默认横向排列导致位置错乱。以下是可行的修复方案：

修改步骤 #

1. 调整body的flex布局方向：将子元素改为垂直排列，保留最小高度确保占满视口
2. 让main区域占据剩余空间：通过flex-grow让main填充body除footer外的所有空间，同时保持card的居中效果
3. 重置footer的定位：使用默认的文档流定位，让footer自然处于页面底部

修改后的关键CSS代码 #

调整body样式 #

body {
  font-family: var(--ff-regular);
  font-weight: var(--fw-regular);
  font-size: var(--fs-regular);
  color: var(--clr-grayish-blue);
  background-color: var(--clr-light-gray);

  /* 修改flex布局设置 */
  display: flex;
  flex-direction: column; /* 垂直排列main和footer */
  min-height: 100vh;
}

添加main的样式 #

main {
  flex-grow: 1; /* 占据body剩余空间 */
  display: flex;
  justify-content: center;
  align-items: center; /* 确保card在页面中垂直水平居中 */
}

修改footer样式 #

footer {
  width: 100%;
  /* 移除fixed定位，默认relative即可，无需额外bottom设置 */
}

效果说明 #

• 当页面内容不足一屏时，footer会自动固定在视口底部
• 当内容超过一屏时，footer会被推到页面最底部，滚动后才能看到，不会遮挡内容
• 适配所有分辨率变化，布局始终稳定

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