Question

我有一个我正在处理的codepen有3个盒子，我正在使用flexbox。我遇到的问题是其中一个盒子没有页脚，所以它与其他2个盒子的高度不同。有没有办法让3个盒子伸展到相同的高度，即使没有页脚？

<article class="box-orange">
  <header>
    <h1 class="subject">Total Viewing Time</h1>
  </header>
  <div class="main">
    <h2 class="count-large">30.45</h2>
  </div>
  <footer>
    <div class="left">
      <h1 class="title">Internal</h2>
      <span class="count">
        100
      </span>
    </div>
    <div class="right">
      <h1 class="title">Public</h1>
      <span class="count">
      245
      </span>
    </div>
  </footer>
</article>

示例：http://codepen.io/pertrai1/pen/RRZOOK

Answer 1

三个部分/框的高度相同，只是没有应用背景颜色。

我建议您将默认颜色应用到框中，然后覆盖为特定部分添加bg颜色。

.box-green {
  background: #9fcf91;
  /* added this */
}

Codepen Demo

Flexbox容器没有拉伸高度

1 个答案: