Bootstrap 4 Flexbox左侧固定、右侧可滚动列的实现问题求助

嘿，太懂你这种折腾半天却没达到预期的挫败感了！其实用Flexbox实现左侧菜单固定、右侧内容独立滚动的布局并不复杂，核心是给容器设置明确的高度限制，同时把滚动属性加到正确的元素上。咱们一步步来搞定它：

常见问题原因 #

你现在出现整体滚动的情况，大概率是外层的.view容器没有设置固定高度，导致它被内容撑开，整个页面跟着滚动；另外，可能也没给右侧内容区域加上滚动属性。

解决方案代码示例 #

下面是完整的实现代码，你可以直接参考：

HTML结构 #

<div class="view">
  <!-- 左侧固定菜单 -->
  <aside class="sidebar">
    <h3>左侧菜单</h3>
    <ul>
      <li>菜单项1</li>
      <li>菜单项2</li>
      <li>菜单项3</li>
      <li>菜单项4</li>
      <li>菜单项5</li>
    </ul>
  </aside>

  <!-- 右侧滚动内容 -->
  <main class="content">
    <h2>右侧内容区域</h2>
    <!-- 这里放大量内容模拟滚动效果 -->
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
  </main>
</div>

CSS样式 #

/* 重置默认样式，避免浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 外层容器：占满视口高度，使用Flex布局 */
.view {
  display: flex;
  height: 100vh; /* 关键：给容器固定高度，限制滚动范围 */
  overflow: hidden; /* 隐藏容器溢出部分，防止整体滚动 */
}

/* 左侧菜单：固定宽度，不被压缩 */
.sidebar {
  width: 250px;
  flex-shrink: 0; /* 关键：禁止左侧菜单被挤压，保持固定宽度 */
  background-color: #f5f5f5;
  padding: 20px;
}

/* 右侧内容：占满剩余空间，内容超出时垂直滚动 */
.content {
  flex: 1; /* 关键：占据容器剩余的所有空间 */
  padding: 20px;
  overflow-y: auto; /* 关键：内容超出时显示垂直滚动条 */
}

关键属性解释 #

• height: 100vh：让.view容器占满整个浏览器视口高度，避免容器被内容无限撑开，为滚动提供明确边界。
• flex-shrink: 0：确保左侧菜单不会因为右侧内容过多而被挤压变形，牢牢保持固定宽度。
• flex: 1：让右侧内容区域自动填充容器剩下的所有空间，自适应不同屏幕宽度。
• overflow-y: auto：只有当右侧内容高度超过容器高度时，才会显示垂直滚动条，完美实现独立滚动效果。

额外注意点 #

如果你的.view容器不能用100vh（比如它是某个父容器的子元素），那只要给父容器设置明确的高度，然后让.view继承这个高度（比如height: 100%）就行，核心是要让.view有一个确定的高度限制，这样overflow属性才能生效。

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