Footer未固定至底部问题：短页上移留空白，长页加bottom:0后覆盖内容

你的问题根源在于position: absolute的特性：

• 没加bottom:0时，footer会跟随文档流，短页面内容不足以撑满视口高度，所以footer停留在内容下方，底部留空白；
• 加了bottom:0后，footer脱离文档流固定在视口底部，长页面的内容会因为没有预留空间被footer覆盖。

推荐两种可靠的解决方法：

方法一：Flex布局（现代浏览器首选） #

用flex布局实现自适应粘性footer，无需计算高度，兼容性好：

/* 修改html和body样式 */
html, body {
  min-height: 100vh; /* 强制占满整个视口高度 */
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* 修改footer样式 */
footer {
  background-color: #0b2239;
  width: 100%;
  margin-top: auto; /* 自动占据剩余空间，把footer推到底部 */
}

方法二：相对定位+内边距（兼容旧浏览器） #

如果需要兼容不支持flex的旧环境，可以用这种需要固定footer高度的方案：

/* 修改html和body样式 */
html, body {
  min-height: 100%;
  margin: 0;
  position: relative;
  padding-bottom: 100px; /* 值必须等于footer的实际高度 */
}

/* 修改footer样式 */
footer {
  background-color: #0b2239;
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 100px; /* 明确footer高度，和body的padding-bottom对应 */
}

两种方案都能实现：短页面时footer固定在视口底部，长页面时footer跟随内容下方，不会覆盖内容。

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