如何动态调整两个重叠的 div 的大小，使它们在增长时保持相同的高度

Question

我有两个垂直显示在彼此之上的 div。两个 div 都扩展了 100% 的宽度。我正在寻找一种方法，让底部 div 的高度由其中存在的内容决定，顶部 div 的高度动态调整自身大小，使其高度与底部 div 的高度相同。

顶部div文字量少，底部div文字量大。显然，随着屏幕尺寸的缩小和文字的环绕，div 会变长。例如，随着屏幕尺寸的缩小，带有大量文本的底部 div 变得比顶部 div 长，顶部 div 的尺寸应该增加。

我知道可以通过事件侦听器或类似的东西动态设置 div 的高度，用 javascript 来完成类似的事情，但我正在寻找一种可以用 html 和 css 完成的方法。

我已经尝试过 flex grow 和基于百分比的高度试验，但都没有效果。我将不胜感激任何人可能有的任何见解！

<div class="container">
  <div class="box b1">One</div>
  <div class="box b2">
    DIV B Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since
    the 1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: column;
  }

  .b1 {
    background-color: red;
    height: 50%;
  }

  .b2 {
    background-color: orange;
    height: 50%;
  }

  .box {
    flex-grow: 1;
  }
</style>

Answer 1

仅用 CSS 不可能实现这一点，因为 CSS 无法根据另一个元素的高度动态设置元素的高度。

这是一个 Javascript 片段，可以实现您想要的结果：

const container = document.querySelector('.container');
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');

function setHeight() {
  const b2Height = b2.offsetHeight;
  b1.style.height = `${b2Height}px`;
}

window.addEventListener('resize', setHeight);
setHeight();

现场演示：

const container = document.querySelector('.container');
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');

function setHeight() {
  const b2Height = b2.offsetHeight;
  b1.style.height = `${b2Height}px`;
}

window.addEventListener('resize', setHeight);
setHeight();

.container {
    display: flex;
    flex-direction: column;
  }

  .b1 {
    background-color: red;
    height: 50%;
  }

  .b2 {
    background-color: orange;
    height: 50%;
  }

  .box {
    flex-grow: 1;
  }

<div class="container">
  <div class="box b1">One</div>
  <div class="box b2">
    DIV B Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since
    the 1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>