html - 兄弟 div 在没有 Flexbox 的情况下填充包装器内的垂直空间

Question

我在一个包装器中并排放置了两个 div。其中一个 div 的内容比另一个多，我希望第二个 div 填充包装的垂直空间。

.wrapper {
  height: 50%;
  width: 50%;
outline: 1px solid gray;
  font-size: 0px;
}
.left {
  display: inline-block;
  width: 70%;
  font-size: 16px;
    background: tomato;
}
.right {
    font-size: 16px;
    background: gold;
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

<div class="wrapper">
  <div class="left">
    This is left
    This is left
    This is left
    This is left
    This is left
    This is left
  </div>
  <div class="right">
    This is right

  </div>
</div>

我知道如何使用 flexbox 做到这一点，但由于兼容性问题，我想在没有它的情况下做到这一点。有谁知道怎么办？

Answer 1

你可以通过定位来做到这一点:

.wrapper {
  position: relative; /* added */
  height: 50%;
  width: 50%;
  outline: 1px solid gray;
  font-size: 0px;
}
.left {
  display: inline-block;
  width: 70%;
  font-size: 16px;
  background: tomato;
}
.right {
  position: absolute; /* added */
  height: 100%; /* added */
  font-size: 16px;
  background: gold;
  width: 30%;
  display: inline-block;
  vertical-align: top;
}

<div class="wrapper">
  <div class="left">
    This is left
    This is left
    This is left
    This is left
    This is left
    This is left
  </div>
  <div class="right">
    This is right

  </div>
</div>