如何仅用CSS始终将.footer类页脚固定在页面底部？是否可行？

别担心，这个问题我碰到过好多次啦！当页面内容不足以撑满整个浏览器视口高度时，页脚就会“跑”到导航栏后面的顶部位置，下面给你三种实用的CSS解决方案，你可以根据自己的项目需求来选：

1. 绝对定位法（适合传统布局场景） #

这个方法通过绝对定位把页脚“钉”在视口底部，需要先确保html和body的高度撑满视口：

/* 基础样式：让html和body占满整个视口高度 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 页脚样式 */
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* 以下是自定义样式，你可以根据需求修改 */
  height: 60px;
  background-color: #333;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
}

注意：如果之后页面内容超过视口高度，页脚会覆盖在内容上方，所以这个方法更适合确定内容不会超过视口的场景，或者你需要额外给内容容器加padding-bottom（值等于页脚高度）来避免遮挡。

2. Flex布局法（现代布局首选，灵活适配） #

利用Flex布局的弹性特性，让中间的内容区域自动占满剩余空间，页脚自然被挤到底部，不管内容多少都能适配：

/* 基础样式：让html和body占满视口高度 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 把body设置为垂直排列的Flex容器 */
body {
  display: flex;
  flex-direction: column;
}

/* 如果有内容容器，让它占满剩余垂直空间；没有的话也可以保留，之后加内容直接用 */
.content {
  flex: 1;
}

/* 页脚样式 */
.footer {
  /* 自定义样式，按需修改 */
  height: 60px;
  background-color: #333;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
}

这个方法的优势在于：当内容很少时，页脚固定在视口底部；当内容超过视口时，页脚会自动跑到内容的最下方，完全不会遮挡内容，非常推荐！

3. Grid布局法（极简现代方案） #

用Grid布局的行分配特性，一行占满剩余空间，一行自适应页脚高度，写法非常简洁：

/* 基础样式：让html和body占满视口高度 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 把body设置为Grid容器，分配行高 */
body {
  display: grid;
  grid-template-rows: 1fr auto; /* 第一行占满剩余空间，第二行随页脚高度自适应 */
}

/* 页脚样式 */
.footer {
  /* 自定义样式，按需修改 */
  height: 60px;
  background-color: #333;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
}

这个方案和Flex的效果一致，代码更短，适合不需要复杂布局的场景。

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