并排组件高度适配与Sticky粘性布局实现技术问询

看起来你需要的是一个兼顾高度自适应和粘性定位的并排布局，我来给你拆解下具体的实现思路和可直接复用的代码方案：

核心需求拆解 #

• 左侧组件A：填满父容器高度，内容超出时内部滚动，绝不拉伸右侧组件的高度
• 右侧组件B：仅占用当前可视空间的高度，且在滚动左侧A时保持「粘性」固定在可视区域内

具体实现方案（纯CSS） #

HTML结构 #

先搭建最基础的并排结构，用父容器包裹两个子组件：

<div class="layout-container">
  <div class="comp-a">
    <!-- 这里放组件A的内容，比如大量文本或动态加载的内容 -->
    <p>示例内容行1</p>
    <p>示例内容行2</p>
    <!-- 重复多段内容模拟A的超长内容 -->
  </div>
  <div class="comp-b">
    <!-- 组件B的内容，比如筛选栏、操作面板等 -->
    <h3>我是粘性固定的B组件</h3>
  </div>
</div>

CSS样式配置 #

通过Flex布局+粘性定位就能实现所有需求，完全不需要JavaScript：

/* 父容器：设置Flex布局，明确高度（这里用视口高度100vh，可根据实际场景调整） */
.layout-container {
  display: flex;
  height: 100vh; /* 如果是嵌套在其他容器中，可改为height: 100%; 前提是父元素有明确高度 */
  overflow: hidden; /* 隐藏父容器滚动条，把滚动逻辑完全交给组件A */
}

/* 左侧组件A：固定宽度，填满父容器高度，内容超出时内部滚动 */
.comp-a {
  flex: 0 0 320px; /* 固定宽度320px，可根据需求自由修改 */
  height: 100%;
  overflow-y: auto; /* 内容超出时自动显示垂直滚动条 */
  padding: 1.2rem;
  background-color: #f8f9fa;
}

/* 右侧组件B：粘性定位，仅占可视空间高度，自适应剩余宽度 */
.comp-b {
  position: sticky;
  top: 0; /* 距离视口顶部0距离，可根据需求调整偏移量，比如top: 10px */
  flex: 1; /* 自动占据父容器的剩余宽度 */
  height: 100vh; /* 限制高度为视口高度，避免被A的超长内容拉长 */
  padding: 1.2rem;
  background-color: #e9ecef;
  /* 如果B自身内容超出可视高度，可添加overflow-y: auto; 让B内部独立滚动 */
}

关键细节说明 #

• 父容器的overflow: hidden是核心：它能避免整个页面出现滚动条，把滚动逻辑严格限制在组件A内部
• 组件B的position: sticky会相对于视口保持固定（因为父容器没有滚动行为），完美实现你要的「粘性」效果
• 如果你的布局是嵌套在非视口高度的容器中（比如弹窗、卡片内），只需把100vh替换为100%，同时确保外层容器有明确的height值即可

进阶优化（可选） #

如果需要组件B在滚动到某个位置后才开始粘性，或者有更复杂的偏移需求，只需调整top属性的值（比如top: 20px让B距离顶部有20px的空隙）；如果B的内容本身也可能超出可视高度，给B添加overflow-y: auto就能让它内部独立滚动，完全不影响粘性效果。

内容来源于stack exchange