本文详解如何通过 css 精确控制页面布局，使固定高度的导航栏（navbar）不参与滚动，而内容区（content）拥有独立垂直滚动条，避免滚动条侵入导航区域。

在构建单页应用或静态页面时，常需将导航栏（

）固定于顶部，同时确保下方内容区可独立滚动——尤其当内容高度远超视口时。关键在于：导航栏必须脱离文档流滚动影响，且内容区需严格占据剩余可用高度，并启用自身滚动机制。若简单对 body 或整个容器设置 overflow: auto，滚动条会覆盖 navbar 或导致其随内容一起滚动，违背设计初衷。

✅ 正确实现原理

核心思路是：

• 将 html 和 body 设为 height: 100vh，并清除默认边距；
• 导航栏使用固定高度（如 50px），并设置 overflow: hidden（防意外溢出）；
• 内容区通过 height: calc(100vh - 50px) 动态计算剩余空间，并显式声明 overflow: auto（或 overflow-y: auto）以启用垂直滚动。

⚠️ 注意：vh 单位基于视口高度，需确保无其他全局 padding/margin 干扰计算；移动端需额外处理 viewport 缩放兼容性。

✅ 完整 CSS 示例

/* 重置基础尺寸与间距 */
html, body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.navbar {
  width: 100%;
  height: 50px;
  overflow: hidden; /* 防止内部内容溢出干扰布局 */
  background-color: #4a6fa5;
  position: sticky;
  top: 0;
  z-index: 100;
}

.content {
  height: calc(100vh - 50px); /* 精确扣除 navbar 高度 */
  overflow-y: auto;           /* 仅允许垂直滚动 */
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动支持 */
  background-color: #f8f9fa;
}

✅ HTML 结构（保持语义化）

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定导航 + 独立内容滚动</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="navbar">
    <nav>
      <ul style="display: flex; align-items: center; height: 100%; margin: 0; padding: 0 20px;">
        <li style="margin-right: 20px;"><a href="#" style="color: white; text-decoration: none;">首页</a></li>
        <li style="margin-right: 20px;"><a href="#" style="color: white; text-decoration: none;">产品</a></li>
        <li><a href="#" style="color: white; text-decoration: none;">关于</a></li>
      </ul>
    </nav>
  </div>

  <div class="content">
    <!-- 此处放置长文本、卡片列表等可滚动内容 -->
    <p>……（大量示例文本，见原始答案）……</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
                                                                                src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill9263" title="Html2md">Html2md</a>
                                                                        <p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
                                                                </div>
                                                                <a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
  </div>
</body>
</html>

? 进阶优化建议

• 响应式适配：若 navbar 高度随屏幕变化（如移动端折叠），推荐改用 CSS 自定义属性（--navbar-height）配合 calc()，便于 JS 动态更新。
• 无障碍增强：为 .content 添加 tabindex="0"，确保键盘用户可通过 Tab 键聚焦并滚动。
• 性能提示：避免对 .content 使用 transform 或 filter，防止触发非合成层滚动，影响滚动流畅度。
• 现代替代方案：CSS Grid 可更简洁实现（如 grid-template-rows: 50px 1fr），但需考虑旧版浏览器兼容性。

通过以上方案，你将获得一个稳定、语义清晰且跨设备可用的“固定导航 + 独立内容滚动”布局，滚动行为完全符合用户预期，且无视觉干扰。

立即学习“前端免费学习笔记（深入）”；