如何使用HTML和CSS实现页面顶部与底部的固定导航栏？

Frames已被废弃，现在用HTML+CSS的position: fixed属性就能轻松实现固定导航栏，下面是完整的实现方案：

HTML结构 #

先搭建基础页面结构，明确区分顶部导航、主内容和底部导航：

<!-- 顶部固定导航栏 -->
<header class="top-nav">
  <nav>
    <a href="#home">首页</a>
    <a href="#about">关于</a>
    <a href="#contact">联系</a>
  </nav>
</header>

<!-- 主内容区域 -->
<main class="main-content">
  <h1>页面主内容</h1>
  <p>这里可以添加任意内容，滚动页面时顶部和底部导航会保持固定...</p>
  <!-- 可添加更多长文本测试滚动效果 -->
</main>

<!-- 底部固定导航栏 -->
<footer class="bottom-nav">
  <nav>
    <a href="#terms">使用条款</a>
    <a href="#privacy">隐私政策</a>
  </nav>
</footer>

CSS样式 #

核心是用position: fixed固定导航栏，同时调整主内容边距避免被遮挡：

/* 全局重置，消除默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 顶部导航栏：固定在视口顶部 */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2c3e50;
  color: #fff;
  padding: 1rem 2rem;
  z-index: 100; /* 确保导航栏在其他内容上方 */
}

.top-nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 1.5rem;
}

.top-nav a:hover {
  text-decoration: underline;
}

/* 主内容：留出上下导航栏的空间，避免被遮挡 */
.main-content {
  margin-top: 5rem; /* 等于顶部导航栏的总高度（内容+内边距） */
  margin-bottom: 4rem; /* 等于底部导航栏的总高度 */
  padding: 2rem;
  min-height: calc(100vh - 9rem); /* 确保内容区域占满可视区域，减去上下导航总高度 */
}

/* 底部导航栏：固定在视口底部 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #2c3e50;
  color: #fff;
  padding: 1rem 2rem;
  z-index: 100;
}

.bottom-nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 1.5rem;
}

.bottom-nav a:hover {
  text-decoration: underline;
}

关键要点说明 #

• position: fixed：让导航栏脱离正常文档流，始终固定在视口的指定位置（top:0对应顶部，bottom:0对应底部）。
• z-index: 100：保证导航栏不会被页面其他元素覆盖，数值可根据实际情况调整。
• 主内容的margin：必须设置与导航栏高度匹配的边距，否则内容会被固定导航栏遮挡；也可以用padding替代，效果一致。
• 响应式适配：如果需要适配移动端，只需调整导航栏的内边距、字体大小，或者在小屏幕下折叠导航项即可。

内容的提问来源于stack exchange，提问作者Jürgen