如何让右侧滚动容器自动匹配左侧内容高度-html教程-PHP中文网

如何让右侧滚动容器自动匹配左侧内容高度

通过 CSS Flexbox 的 align-items: stretch 特性，结合统一的 max-height 约束，可使右侧滚动区域动态匹配左侧内容高度，无需 JavaScript。

通过 css flexbox 的 `align-items: stretch` 特性，结合统一的 `max-height` 约束，可使右侧滚动区域动态匹配左侧内容高度，无需 javascript。

在构建双栏布局时，常遇到这样的需求：左侧区域高度由内容自然撑开，右侧区域需与之等高并支持垂直滚动（尤其当内容远多于左侧时）。但直接为右侧设置固定 height 会破坏响应性；而仅设 overflow-y: scroll 又无法触发滚动——因为默认情况下，Flex 子项会随父容器拉伸，但若父容器无明确高度限制，子项将无限扩展。

核心解法：利用 Flex 的拉伸行为 + 统一最大高度约束

Flex 容器（.parent）默认启用 align-items: stretch，这意味着子元素（.left 和 .right）会尝试填满交叉轴（此处为垂直方向）的可用空间。但“可用空间”取决于父容器的高度来源。若 .parent 本身高度未被限制，其高度将由子项中最高的那个决定（即左侧内容），此时右侧无法获得明确的滚动上下文。

✅ 正确做法是：为 .parent 或 .left 设置 max-height，同时确保 .right 共享同一 max-height 并启用 overflow-y: auto。这样：

.parent 的高度上限被定义，从而为子项提供明确的拉伸基准；
.left 自然撑高（但不超过该上限）；
.right 被拉伸至相同高度，并因内容超长而触发滚动。

以下是优化后的完整 CSS 示例：

.header {
  height: 50px;
  border: 1px solid red;
}

.parent {
  display: flex;
  gap: 20px;
  align-items: stretch;
  max-height: calc(100vh - 50px); /* 减去 header 高度，确保整体不溢出视口 */
  overflow: hidden; /* 防止 parent 自身出现滚动条 */
}

.left {
  width: 50%;
  /* 不设 height/max-height，由内容驱动，但受 parent 限制 */
}

.right {
  width: 50%;
  overflow-y: auto; /* 推荐 auto 而非 scroll，避免空滚动条 */
  /* 不设 height，依赖 stretch 行为匹配 parent 的计算高度 */
}

/* 为 li 添加样式便于观察 */
.right li {
  height: 100px;
  background: #ffd1dc;
  margin: 4px 0;
  list-style: none;
}

⚠️ 关键注意事项：