如何让动态宽度的固定垂直navbar不与页面主内容重叠？

核心思路是利用CSS变量统一管理导航栏的宽度规则，再通过calc()让主内容区的边距和宽度动态适配导航栏的实际宽度，确保无论屏幕尺寸如何变化，两者都不会重叠。

修改后的关键CSS代码 #

:root {
  /* 统一定义导航栏的宽度规则：优先20%视口宽度，最小宽度自适应内容 */
  --nav-width: max(20%, max-content);
}

nav {
  position: fixed;
  width: var(--nav-width); /* 使用变量设置宽度 */
  /* 其余样式保持不变 */
}

main {
  /* 左边距等于导航栏宽度 + 1rem间距，避免紧贴 */
  margin-left: calc(var(--nav-width) + 1rem);
  /* 宽度自适应剩余空间：总宽度 - 导航栏宽度 - 左右外边距 */
  width: calc(100% - var(--nav-width) - 2rem);
  min-width: 200px;
}

完整代码示例 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root {
  --nav-width: max(20%, max-content);
}

* {
  box-sizing: border-box;
  margin: 0;
  scroll-behavior: smooth;
}

body {
  display: flex;
}

nav {
  position: fixed;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: var(--nav-width);
  height: 100%;
  padding: 1rem 0.5rem;
  background-color: #5382a1;
  font-family: Tahoma, sans-serif;
}

nav header {
  font-weight: bold;
  color: white;
}

nav ul {
  padding: 0;
}

nav li {
  display: block;
  padding: 0.4rem;
  border: 1px solid white; 
  margin: 0.2rem 0;
  text-align: center;
  border-radius: 3px;
  background-color: white;
  color: hsl(34, 94%, 54%);
}

nav li:hover {
    color: white; background-color: hsl(34, 94%, 54%);
}

nav a {
text-decoration: none;
color: inherit;
}

nav a:hover {
  color: white;
}

main {
  width: calc(100% - var(--nav-width) - 2rem);
  min-width: 200px;
  margin: 1rem 1rem 2rem calc(var(--nav-width) + 1rem);
}

p {
  margin: 1rem 0;
}
</style>
  </head>
  <body>
    <nav id="navbar">
      <header>Navbar</header>
      <ul>
        <li><a class="nav-link" href="#section-one">Section One</a></li>
        <li><a class="nav-link" href="#section-two">Section Two</a></li>
        <li><a class="nav-link" href="#section-three">Section Three</a></li>
      </ul>
    </nav>
    <main>
<section id="section-one" class="main-section">
        <header>
          <h2>Section One</h2>
        </header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="section-two" class="main-section">
        <header>
          <h2>Section Two</h2>
        </header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="section-three">
        <header>
          <h2>Section Three</h2>
        </header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</main>
</body>
</html>

方案说明 #

1. CSS变量统一管理：通过--nav-width变量定义导航栏的宽度逻辑，宽屏时占20%视口宽度，窄屏时自动适配内容宽度，避免内容挤压。
2. 动态适配边距与宽度：主内容区的边距和宽度都基于导航栏的宽度变量计算，确保始终留出足够空间，不会与固定定位的导航栏重叠。
3. 保留最小宽度限制：导航栏和主内容区的最小宽度设置，保证极端窄屏情况下内容不会变形。

内容的提问来源于stack exchange，提问作者Sergey Zolotarev