html - 如何让两个div一样高

Question

我有两个并排的 div，现在我希望左侧容器定义右侧容器的高度，这样右侧容器可以达到左侧容器的最大高度。所以右边的容器应该总是有左边的高度。加上右边的有一个固定的标题和一个可滚动的内容。

我也知道我可以给正确的容器 position: absolute 但我想知道是否有更现代的解决方案。

Answer 1

这就是你想要的吗？这是我在评论中所说的一个例子

.container {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.left,
.right {
  width: 50%;
  padding: 20px;
  color: white;
}

.left {
  background: red;
}

.right {
  background: blue;
}

<div class="container">
  <div class="left">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime
      fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam
      architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi
      impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati
      voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio
      animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
    </p>
  </div>
  <div class="right">
    <p>less content</p>
  </div>
</div>

如果这不对，请进一步解释，据我所知，这回答了您提出的问题。

编辑

根据您的评论，请检查此代码，这应该会为您提供所需的解决方案:

.container {
  display: flex;
  flex: 1;
  align-items: stretch;
  height: 100%;
}

.left,
.right {
  width: 50%;
  padding: 20px;
  color: white;
  display: flex;
}

.left {
  background: red;
}

.right {
  background: blue;
  position: relative;
  right: 0;
  overflow: scroll;
  position: relative;
}

.content {
  height: 100%;
  position: absolute;
}

<div class="container">
  <div class="left">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
    </p>
  </div>
  <div class="right">
    <div class="content">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
    </p>
    </div>
  </div>
</div>