本文介绍一种纯 CSS 方案，通过重构布局结构（使用 position: fixed 容器 + Flex 布局），使动态宽度的垂直导航栏与主内容自动协同响应，彻底避免小屏幕下的视觉重叠，无需 JavaScript 或硬编码像素值。
本文介绍一种纯 css 方案，通过重构布局结构（使用 `position: fixed` 容器 + flex 布局），使动态宽度的垂直导航栏与主内容自动协同响应，彻底避免小屏幕下的视觉重叠，无需 javascript 或硬编码像素值。
在构建单页应用或文档型网站时，常需一个固定定位（position: fixed）的垂直侧边导航栏。但当导航栏宽度由内容动态决定（如 min-width: max-content）、且主内容区域未做适配时，小屏设备（如手机）极易出现导航栏覆盖
根本原因在于：position: fixed 元素脱离文档流，父容器的 Flex 布局对其完全失效；而 calc(100% - nav.width) 在 CSS 中无法获取元素运行时宽度，导致传统“留白”思路不可行。
✅ 推荐解法：用 fixed 容器包裹导航与主内容，并启用 Flex 布局
核心思想是将 position: fixed 从 nav 上移至其父容器，使 nav 和 main 成为同一 Flex 容器内的兄弟元素。此时，Flex 的空间分配机制（flex, width, min-width）可自然协调二者尺寸，且完全响应式：
.page {
position: fixed;
display: flex;
top: 0; left: 0;
width: 100%; height: 100%;
overflow: hidden; /* 防止双滚动条 */
}
nav {
/* 移除 position: fixed */
flex: 0 0 auto; /* 不伸缩、不压缩，仅按内容/宽度假设占位 */
width: 20%; /* 基准宽度（可被 min-width 覆盖） */
min-width: max-content; /* 动态撑开，确保文字不换行截断 */
height: 100%;
padding: 1rem 0.5rem;
background-color: #5382a1;
font-family: Tahoma, sans-serif;
}
main {
flex: 1; /* 填充剩余全部空间 */
overflow-y: auto; /* 主内容独立滚动 */
height: 100%;
padding: 1rem; /* 替代原 margin，更可控 */
}对应 HTML 结构需包裹一层 .page 容器：
<body>
<div class="page">
<nav id="navbar">
<header>Navbar</header>
<ul>
<li><a href="#section-one">Section One</a></li>
<li><a href="#section-two">Section Two</a></li>
<li><a href="#section-three">Section Three</a></li>
</ul>
</nav>
<main>
<section id="section-one"><h2>Section One</h2><p>...</p></section>
<!-- 其他 section -->
</main>
</div>
</body>? 关键设计说明：
- flex: 0 0 auto 确保导航栏宽度由内容驱动（min-width: max-content）且不被 Flex 压缩，同时避免意外拉伸；
- main 使用 flex: 1 自动占据剩余宽度，无论 nav 实际多宽（20%、240px 或 300px），main 始终紧邻其右，零重叠；
- overflow-y: auto 保证主内容可独立滚动，避免页面整体卡死；
- 移除 body { display: flex }，因其对 fixed 子元素无效，反而干扰布局逻辑。
⚠️ 注意事项：
- 若页面需支持顶部通栏（如 banner 或 header），应将其置于 .page 外部，并通过 padding-top 或 margin-top 预留空间；
- min-width: max-content 在旧版 Safari 中兼容性有限，生产环境建议添加 min-width: 180px 作为降级；
- 所有绝对定位元素（如弹窗、提示框）的 z-index 需高于 .page（例如 z-index: 1000），否则会被遮挡。
此方案简洁、健壮、无 JS 依赖，完美契合现代 CSS 布局理念：用容器逻辑替代手动计算，让浏览器引擎自动处理响应式协同。无论导航项增减、字体缩放或屏幕旋转，布局始终稳定可靠。
