如何让页脚固定在网页底部而非视口底部？

嘿，我来帮你搞定这个固定页脚的问题！你现在的页脚在视口底部但会遮挡内容，核心是要让它固定在浏览器窗口底部，同时给页面主体留出足够空间不被覆盖。这里有两种靠谱的方法，你可以根据自己的情况选：

方法1：固定定位（Fixed Position） #

这是最直接的快速实现方案：

1. 首先给你的页脚元素（假设它的选择器是#footer，如果不是请替换成你实际的ID/类）添加以下CSS：

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* 替换成你自己的页脚样式 */
  background-color: #fff; /* 示例背景色 */
  height: 60px; /* 替换成你实际的页脚高度 */
}

2. 然后修改你的body样式，添加padding-bottom，值等于页脚的高度，避免页面内容被页脚遮挡：

body {
  background-color: #40E39C;
  padding-bottom: 60px; /* 和页脚高度保持一致 */
}

原理说明 #

position: fixed会让页脚脱离文档流，一直固定在浏览器底部，但脱离流的元素会覆盖后方内容，所以给body加底部内边距，就能给页脚留出专属空间啦。

方法2：Flex布局实现Sticky Footer #

如果你的页面内容有时候很少（比如只有导航栏），用这个方法能让页脚始终贴在页面底部，而不是悬浮在窗口中间，适配性更强：

1. 先修改html和body的样式，把body变成垂直方向的Flex容器：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #40E39C;
  display: flex;
  flex-direction: column;
}

2. 给你的页面主体内容容器（比如#main-content，如果没有可以把所有内容包在一个容器里）添加flex: 1，让它占满剩余空间：

#main-content {
  flex: 1;
}

3. 最后给页脚写正常的样式就行，它会自动被推到页面底部：

#footer {
  /* 你的页脚样式 */
  background-color: #fff;
  height: 60px;
}

原理说明 #

Flex布局会让主体内容自动撑满浏览器窗口的剩余空间，页脚自然就被挤到底部了，而且不需要额外处理内容遮挡的问题，非常适合各种页面长度的场景。

小提醒：如果你的页脚有特定的类名或ID，记得把上面的#footer替换成你实际使用的选择器哦！

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