如何将导航栏置于屏幕右侧？如何实现左侧固定导航+右侧可滚动布局？

要实现左侧导航栏占屏幕一半宽度、固定不动，右侧内容区域可滚动的效果，你可以用CSS Grid 或 Flexbox 来完成，以下是具体方案：

核心思路 #

• 容器占满整个视口高度，分为左右两列（各50%宽度）
• 左侧导航栏设置固定定位逻辑，确保始终停留在视口内
• 右侧内容区域开启垂直滚动，仅自身内容超出时滚动

方案1：CSS Grid 实现 #

HTML 结构 #

<div class="container">
  <nav class="navbar">
    <ul>
      <li>导航项 1</li>
      <li>导航项 2</li>
      <li>导航项 3</li>
      <li>导航项 4</li>
    </ul>
  </nav>
  <main class="content">
    <!-- 这里放置长内容用于测试滚动 -->
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <!-- 重复足够多的内容以触发滚动 -->
  </main>
</div>

CSS 样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden; /* 隐藏全局滚动条，仅让右侧内容区域滚动 */
}

.container {
  display: grid;
  grid-template-columns: 50% 50%; /* 两列各占一半宽度 */
  height: 100vh; /* 容器占满视口高度 */
}

.navbar {
  position: sticky;
  top: 0;
  height: 100vh; /* 导航栏占满视口高度，固定在左侧 */
  background-color: #f5f5f5;
  padding: 2rem;
}

.content {
  overflow-y: auto; /* 开启垂直滚动 */
  padding: 2rem;
}

/* 可选：美化导航样式 */
.navbar ul {
  list-style: none;
}

.navbar li {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
}

方案2：Flexbox 实现 #

如果更习惯用 Flexbox，也可以这样写：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

.container {
  display: flex;
  height: 100vh;
}

.navbar {
  position: sticky;
  top: 0;
  width: 50%;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 2rem;
}

.content {
  flex: 1; /* 占据剩余宽度 */
  overflow-y: auto;
  padding: 2rem;
}

为什么你之前的尝试没生效？ #

• 没有给容器设置height: 100vh：sticky 定位需要参考父容器的高度，若容器高度未占满视口，sticky 无法实现固定效果
• 右侧内容区域未设置overflow-y: auto：即使内容过长，也只会触发全局滚动，而非右侧区域单独滚动

内容的提问来源于stack exchange，提问作者Angello Hidalgo Salazar