twitter-bootstrap - 使 A 列的高度等于 B 列的高度

Question

我试图让网页上的 2 列具有相同的高度。列的高度未预先设置。我想要完成的是 A 列始终等于 B 列。如果 A 列有更多内容，它必须获得一个滚动条。

我的父容器中确实有 2 列，但 A 列较小或 A 列拉伸(stretch)了父容器。 A 列的高度由 B 列决定。该元素确实使用了 Bootstrap 。

<div class="parent col-md-12">
  <div class="colA col-md-3"></div>
  <div class="colB col-md-9"></div>
</div>

期望的结果:

• 如果 A 列为 50px，B 列为 100px，则将 A 列设为 100px
• 如果 A 列为 100px，B 列为 100px，则将 A 列设为 100px(无需更改)
• 如果 A 列为 150px，B 列为 100px，则将 A 列设为 100px

Answer 1

只要对 HTML 稍作改动，Flexbox 就可以做到这一点。

Columnb 将采用 ColumnB 的高度，但 ColumnA 的内容位于绝对定位的 div 中，高度为 100%(并且溢出)。

.parent {
  display: flex;
  margin-bottom: 1em;
}
.colA {
  position: relative;
  background: pink;
  flex: 1;
}
.colB {
  height: 75px;
  flex: 1;
  background: lightblue;
}
.inner {
  position: absolute;
  height: 100%;
  overflow: auto;
}
.tall .colB {
  height: 180px;
}

<div class="parent">
  <div class="colA">
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium iure nostrum nemo eaque sunt impedit reiciendis expedita ducimus necessitatibus voluptas excepturi, deleniti aut repellat! Porro nihil nemo, ipsum ipsa reiciendis quis
        cupiditate fugiat quam!</p>
    </div>
  </div>
  <div class="colB"></div>
</div>

<div class="parent tall">
  <div class="colA">
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium iure nostrum nemo eaque sunt impedit reiciendis expedita ducimus necessitatibus voluptas excepturi, deleniti aut repellat! Porro nihil nemo, ipsum ipsa reiciendis quis
        cupiditate fugiat quam!</p>
    </div>
  </div>
  <div class="colB"></div>
</div>