如何用HTML创建固定左侧且不重叠内容的侧边栏？

方案一：display: flex + position: sticky（推荐） #

这种方法无需手动设置主内容的偏移量，通过Flexbox自动分配空间，同时让侧边栏始终保持可见，是最简洁的实现方式。

HTML结构

<body>
  <aside class="sidebar">
    <h3>侧边栏</h3>
    <ul>
      <li>导航项1</li>
      <li>导航项2</li>
      <li>导航项3</li>
      <li>导航项4</li>
    </ul>
  </aside>
  <main class="main-content">
    <h1>主内容区域</h1>
    <!-- 可添加长内容测试滚动效果 -->
    <p>示例文本...</p>
  </main>
</body>

CSS样式

body {
  margin: 0;
  min-height: 100vh;
  display: flex; /* 启用Flexbox布局 */
}

.sidebar {
  position: sticky; /* 让侧边栏固定在视口顶部 */
  top: 0;
  height: 100vh; /* 占满视口高度 */
  overflow-y: auto; /* 内容过长时允许滚动 */
  background-color: #f5f5f5;
  padding: 1.5rem;
  flex-shrink: 0; /* 防止侧边栏被压缩 */
  width: 220px; /* 可自定义宽度，或用min-content自动适配内容 */
}

.main-content {
  flex: 1; /* 自动填充侧边栏以外的所有空间 */
  padding: 1.5rem;
}

方案二：position: fixed + CSS Grid #

如果你更倾向于使用position:fixed，可以通过Grid布局预留侧边栏空间，避免主内容重叠：

HTML结构

<body>
  <div class="sidebar-placeholder"></div> <!-- 占位元素，用于预留空间 -->
  <aside class="sidebar">侧边栏内容</aside>
  <main class="main-content">主内容区域</main>
</body>

CSS样式

body {
  display: grid;
  grid-template-columns: min-content 1fr;
  margin: 0;
  min-height: 100vh;
}

.sidebar-placeholder {
  width: 220px; /* 与侧边栏宽度保持一致 */
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 1.5rem;
  width: 220px;
}

.main-content {
  grid-column: 2; /* 让主内容占据Grid第二列 */
  padding: 1.5rem;
}

关键说明 #

• 无重叠实现：两种方案都不需要手动设置主内容的left或margin-left值，而是通过布局系统自动分配空间。
• 固定可见性：position:sticky或position:fixed确保侧边栏始终处于视口可见范围内。
• 能否仅用position/display？ 单独使用position或display无法完成完整布局，需要补充flex、height等属性控制尺寸，但核心依赖的是display:flex/grid和position:sticky/fixed，完全符合你的需求。

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