前端实习新手求助：Footer无法固定在页面底部

问题原因 #

你当前的代码存在两个核心问题：

1. 虽然给main设置了flex-grow:1，但父容器.main-wrapper没有配置flex布局，导致这个属性完全不起作用。
2. 使用position:absolute定位footer时，没有给父容器设置position:relative，且未处理内容过长时的遮挡问题——footer会固定在视口底部，而非页面内容的最下方。

方案一：Flex布局（推荐，现代浏览器友好） #

这种方法无需计算高度，能自动适配内容长度：

修改你的CSS为以下内容：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', Arial;
}

html, body {
  height: 100%;
  margin: 0;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保容器至少占满视口高度，内容过长时自动延伸 */
}

main {
  flex-grow: 1; /* 让main占据容器剩余所有空间，footer被挤到底部 */
}

footer {
  width: 100%;
  padding: 15px;
  background-color: #424242;
  /* 移除原有的position:absolute、bottom:0，交给flex布局处理 */
}

方案二：修正绝对定位方案 #

如果坚持使用绝对定位，需要调整父容器属性并处理内容遮挡：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', Arial;
}

html, body {
  height: 100%;
  margin: 0;
}

.main-wrapper {
  position: relative; /* 让footer相对于这个容器定位 */
  min-height: 100vh;
  padding-bottom: 60px; /* 值需等于footer的实际高度，防止内容被footer覆盖 */
}

main {
  /* 保留原有的其他样式即可 */
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 60px; /* 固定footer高度，方便计算padding-bottom */
  width: 100%;
  padding: 15px;
  background-color: #424242;
}

效果说明 #

• 方案一：当页面内容不足视口高度时，footer固定在视口底部；当内容超过视口高度时，footer被推到页面最下方。
• 方案二：同样实现上述效果，但需要手动计算footer高度，灵活性不如flex布局。

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