Bootstrap5实现左半屏固定全高图片、右半屏滚动文本问题求助

核心原因 #

你当前给左侧图片列设置的vh-100仅等于浏览器视口高度，当右侧文本总高度超过视口高度时，整个row容器的高度会被文本撑高，只有视口高度的左侧列随页面滚动时自然会出现上下白边。

背景图方案修复代码 #

直接复用你现有的背景图逻辑，仅通过调整Bootstrap自带类即可解决问题，无需大幅修改代码：

<body class="m-0">    
<div class="container-fluid p-0">
    <!-- 移除原有的align-items-center，避免左侧列被垂直居中 -->
    <div class="row g-0">
        <!-- 新增sticky-top类实现滚动时固定在视口顶部，md断点以上占6格（50%宽度），移动端占12格 -->
        <div class="col-md-6 plaatje sticky-top vh-100"> </div>
        <div class="col-md-6 text-center px-5 py-5">
        <h1>
        <b>NAME</b>
        </h1>
        <p class="text-secondary">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat.
        <!-- 你可以在这里补充多段文本测试滚动效果 -->
        </p>
        </div>
     </div>
</div>

<style>
.plaatje {
background: url("https://www.vitality-club.nl/wp-content/uploads/2021/11/IMG_9218.jpeg") no-repeat center center; 
  background-size: cover;
}
/* 可选：移动端时左侧图片高度设为50vh，避免打开页面全是图片看不到文本 */
@media (max-width: 767px) {
  .plaatje {
    height: 50vh !important;
    position: static !important;
  }
}
</style>
</body>

关键修改说明 #

• 给左侧列添加sticky-top类：实现滚动时左侧列固定在视口顶部，始终占满视口高度，不会出现白边
• 给container-fluid加p-0、row加g-0：移除Bootstrap默认的容器内边距和列间距，避免图片左右出现白边
• 可选添加移动端适配：小于768px时左侧图片高度改为50vh，优化移动端浏览体验

替代方案：img标签实现（更利于SEO） #

如果需要图片被搜索引擎抓取，推荐用img标签替代背景图，实现效果完全一致：

<body class="m-0">    
<div class="container-fluid p-0">
    <div class="row g-0">
        <div class="col-md-6 sticky-top vh-100 p-0 overflow-hidden">
          <img src="https://www.vitality-club.nl/wp-content/uploads/2021/11/IMG_9218.jpeg" alt="页面展示图" class="w-100 h-100 object-fit-cover">
        </div>
        <div class="col-md-6 text-center px-5 py-5">
        <h1>
        <b>NAME</b>
        </h1>
        <p class="text-secondary">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat.
        </p>
        </div>
     </div>
</div>

<style>
@media (max-width: 767px) {
  .sticky-top {
    height: 50vh !important;
    position: static !important;
  }
}
</style>
</body>

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