如何使用CSS实现位于网页内容下方的底部导航栏？

你要的是粘性页脚（Sticky Footer）——页面内容较少时贴在视口底部，内容超过视口时跟随滚动到页面最底部，和Stack Overflow的页脚逻辑完全一致。以下是具体实现方案：

核心实现步骤 #

1. 调整HTML结构 #

给页面主体内容加独立容器，和底部导航栏分开，结构如下：

<!-- 页面主体内容容器 -->
<div class="page-content">
  <!-- 这里放置你的所有页面内容 -->
</div>

<!-- 底部导航栏 -->
<div id="navbar">
  <!-- 导航栏内部元素 -->
</div>

2. 编写CSS样式 #

用Flexbox可以简单实现，无需复杂的高度计算：

/* 全局基础设置，确保页面根元素占满视口高度 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 将body设为垂直方向的flex容器 */
body {
  display: flex;
  flex-direction: column;
}

/* 让主体内容自动填充剩余空间，把导航栏挤到页面底部 */
.page-content {
  flex: 1;
}

/* 底部导航栏样式 */
#navbar {
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background-color: #333;
  padding: 0;
  font-weight: bold;
  color: #c5cad0;
  width: 100%;
  box-sizing: border-box; /* 防止内边距/边框导致宽度溢出 */
}

为什么你之前的方法无效？ #

• position: absolute：需要父元素设置position: relative才会相对父容器定位，但即使设置了，当页面内容超过视口高度时，导航栏会停在初始视口底部，无法跟随滚动到页面最下方。
• position: fixed：是固定在浏览器视口底部，始终悬浮在屏幕下方，和Stack Overflow"跟随页面内容到底部"的逻辑不符。
• static/relative/sticky：默认遵循文档流，页面内容高度不足视口时，导航栏会跟着内容走，无法贴到视口底部；且你未设置width: 100%和box-sizing，导致无法全屏显示。

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