本文提供纯 CSS 方案，通过重构布局结构（用 position: fixed 容器包裹导航与主内容，并启用 flex 布局），使动态宽度的垂直导航栏与 区域始终自适应、无重叠，兼容小屏幕设备，无需 JavaScript。
本文提供纯 css 方案，通过重构布局结构（用 `position: fixed` 容器包裹导航与主内容，并启用 flex 布局），使动态宽度的垂直导航栏与 `
在构建单页应用或文档型网站时，常需一个固定定位（position: fixed）的垂直侧边导航栏。但当导航栏宽度由内容决定（如使用 min-width: max-content）、且需适配移动端时，传统写法极易导致导航栏与主内容重叠——尤其在窄屏下，fixed 元素脱离文档流，无法被父容器 flex 排布约束，calc(100% – nav.width) 又因 CSS 不支持跨元素变量引用而失效。
核心思路：放弃对单个 nav 应用 fixed，转而将整个导航+主内容区域封装进一个 position: fixed 的 Flex 容器中。 这样既保留了“始终可见”的固定定位效果，又让 nav 和 main 成为同一 Flex 上下文中的兄弟元素，可自然响应式分配空间。
✅ 推荐实现方案（纯 CSS）
首先，移除原
<body> <div class="page"> <nav id="navbar">...</nav> <main>...</main> </div> </body>对应关键 CSS 如下：
.page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; overflow: hidden; /* 防止外容器滚动 */ } nav { /* 移除 position: fixed */ flex: 0 0 auto; /* 关键：禁止缩放，保持内容宽度 */ min-width: max-content; /* 动态宽度基础 */ width: 20%; /* 作为初始参考值，窄屏下仍以 min-width 为准 */ height: 100%; padding: 1rem 0.5rem; background-color: #5382a1; font-family: Tahoma, sans-serif; display: flex; flex-direction: column; } main { flex: 1; /* 自动填充剩余空间，避免硬编码 margin-left */ overflow-y: auto; /* 主内容独立滚动，不随导航滚动 */ height: 100%; padding: 1rem; margin-left: 1rem; /* 可选：增加导航与主内容间距 */ }? 为什么 flex: 0 0 auto 是关键？
它等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto;，确保导航栏宽度严格由其内容（min-width: max-content）和初始设定（如 width: 20%）共同决定，不会被 Flex 压缩或拉伸，同时又能参与 Flex 布局计算，使 main 准确占据剩余空间。
? 响应式增强（可选）
为提升小屏体验，可添加媒体查询，在超窄视口下切换为顶部导航或汉堡菜单：
@media (max-width: 768px) { .page { flex-direction: column; } nav { width: 100%; min-width: auto; flex: none; } main { flex: 1; margin-left: 0; } }⚠️ 注意事项
- 滚动行为分离：main 必须设置 overflow-y: auto（或 scroll），否则长内容会溢出且不可滚动；.page 则建议设 overflow: hidden，避免双滚动条。
- box-sizing 一致性：确保所有元素含 box-sizing: border-box，避免内边距/边框影响宽度计算。
- 无障碍与 seo：导航仍保留在 dom 顺序靠前位置，语义结构未破坏，对屏幕阅读器友好。
- 避免 margin-left 硬编码：原方案中 main { margin-left: 25% } 在导航变宽时必然失效；新方案中 flex: 1 天然规避此风险。
该方案已在 JSFiddle 中验证，支持从桌面到手机全尺寸响应，完全基于现代 CSS Flexbox，零 JavaScript 依赖，简洁、健壮、可维护。