Bootstrap 5轮播页面实现窗口缩放时保持固定的粘性页脚

问题根源 #

1. HTML结构错误：<header>元素错误放置在<head>元标签内，导致浏览器渲染布局异常，是窗口缩放时页脚尺寸错乱的核心原因
2. 粘性页脚实现逻辑错误：当前.footer使用relative定位，未实现真正的粘性布局，且没有给页面容器设置最小视口高度，内容不足时页脚会被拉伸

具体修改方案 #

1. 修正HTML结构 #

将当前放在<head>标签内的全部<header>...</header>代码块，移动到<body>标签的最开头，位于<main>标签之前，保证页面结构符合HTML规范。

2. 修改CSS代码 #

替换原有对应部分的CSS即可：

/* 全局body样式修改 */
body {
  color: #5a5a5a;
  /* 新增以下3行，让body占满整个视口高度，垂直排列子元素 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 新增main标签样式，让主体内容自动占满剩余高度 */
main {
  flex: 1 0 auto;
}

/* 页脚样式修改，删除无用定位属性，新增防压缩配置 */
.footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
  background-color: #f8f9fa;
  height: 80px;
  color: black;
  text-align: center;
  font-size: large;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 新增：防止flex布局下页脚被压缩 */
  flex-shrink: 0;
}

修改后即可解决两个问题：内容不足时页脚固定在视口底部、高度保持80px不变，窗口缩放时页脚尺寸也不会异常变动，内容超出视口高度时页脚会跟随内容流动到页面末尾，不会遮挡内容。

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