Bootstrap4左侧固定右侧滚动布局失效问题求助

你的问题核心是没给左侧栏设置固定定位——overflow:hidden是用来控制容器内部内容溢出的，没法让元素固定在视口。页面整体滚动时，左侧栏自然会跟着动。按下面的修改就能实现需求：

关键调整点 #

• 给左侧栏加position-fixed，让它固定在视口；同时用w-md-25（对应col-md-3的25%宽度），保证和原布局宽度一致。
• 右侧栏加offset-md-3，留出左侧栏的宽度空间，避免被固定元素遮挡。
• 右侧栏必须搭配vh-100+overflow-auto，让它占满视口高度，内部内容超出时自动滚动。
• 去掉左侧栏的overflow-hidden，这个属性在这里没用。

修改后的完整代码 #

<body>
 <div class="container-fluid">
  <div class="row">
   <!-- 左侧固定栏 -->
   <div class="col-md-3 pt-5 align-items-center back-color1 vh-100 position-fixed w-md-25">
      <img>
      <p></p>
      <h3></h3>
      <div>
         (for nav-btns..)
         <p></p>
      </div>
   </div>
   <!-- 右侧滚动栏 -->
   <div class="col-md-9 offset-md-3 back-color2 vh-100 overflow-auto">
     <div class="vh-100">
      <h1></h1>
      <p></p>
      <a></a>
      <div> (space for img.) </div>
     </div>
     <div class="vh-100">
       (this div for other contents on the page. This has to come down)
     </div>
   </div>
  </div>
 </div>
</body>

补充提示 #

• 如果移动端（md以下断点）不需要固定左侧栏，把position-fixed换成position-md-fixed，小屏幕下左侧栏会正常流动。
• 要是左侧栏内容太长，可以给它加overflow-y:auto，让左侧内部也能滚动（按需选择）。

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