本文介绍一种纯 css 方案：通过包裹容器实现 flex 布局控制，让固定定位的垂直导航栏与主内容自适应分离，彻底避免小屏下重叠，无需 javascript 介入。
本文介绍一种纯 css 方案：通过包裹容器实现 flex 布局控制，让固定定位的垂直导航栏与主内容自适应分离，彻底避免小屏下重叠，无需 javascript 介入。
在构建响应式单页应用或文档型网站时，常需一个固定在左侧的垂直导航栏（
核心思路：放弃对
✅ 正确做法是：
- 创建一个 .page 包裹层，设置 position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex;；
- 移除
- 将
设为 flex 子项，并添加 overflow-y: scroll 和 height: 100%，确保其可滚动且高度占满剩余空间； - 所有尺寸单位优先使用相对值（如 %, vw, rem），配合 min-width 保障最小可用性。
以下是优化后的关键 CSS 片段：
.page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
}
nav {
/* 移除 position: fixed */
display: flex;
flex-direction: column;
width: 20%; /* 初始建议宽度 */
min-width: max-content; /* 关键：宽度随内容撑开，但不低于文字所需 */
height: 100%;
padding: 1rem 0.5rem;
background-color: #5382a1;
font-family: Tahoma, sans-serif;
flex: 0 0 auto; /* 防止被压缩，保持自然宽度 */
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
main {
flex: 1; /* 占据剩余全部宽度 */
overflow-y: auto; /* 必须启用纵向滚动 */
height: 100%;
padding: 1rem;
margin-left: 1rem; /* 可选：增加与 nav 的视觉间距 */
}HTML 结构同步调整为语义化嵌套：
<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 内容 -->
</main>
</div>
</body>⚠️ 注意事项与最佳实践：
-
勿遗漏 height: 100% 和 overflow-y: scroll/auto：这是保证
在窄屏下可滚动、内容不被截断的关键； - 慎用 width: 20% 硬编码：推荐改用 width: fit-content 或结合 min-width: 180px; max-width: 280px 实现更稳健的响应式收缩；
- 移动端适配增强：可添加媒体查询，在
- 无障碍与 SEO 友好：保持
- 性能提示：该方案完全基于 CSS 渲染流，无 JS 计算与重排，加载与滚动均高效流畅。
该方法不仅解决了“动态宽度导航栏挤压主内容”的经典布局难题，更将固定定位与弹性布局优势结合，兼顾可维护性、可访问性与跨设备一致性，是现代 CSS 布局思维的典型实践。
