用CSS同等分配高度

Question

我有一个非常棘手的HTML问题，我不确定是否有基于CSS的解决方案。基本上我有一个三列网格。第一列和第三列可以包含可变数量的行。第二列总是只有一行。每行都有一个最小高度。

因此，行数最多的列将包含高度设置为最小高度的所有行。其他列中的行应在高度上均匀扩展以占用剩余空间。

假设第一列有三行，每行高50px。第二列必须有一行150px高。如果第三列有2行，则每行必须高75px。下面是一些图片，以进一步说明我的目标。

这对CSS来说是否可能？

Answer 1

如果你不介意只在少数几个浏览器中工作，那么你绝对可以用纯CSS做到这一点。继续，添加和删除任意数量的孙子div：

http://codepen.io/cimmanon/pen/ldmtJ

/* line 5, ../sass/test.scss */
.wrapper {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
}
@supports (display: flex) and (flex-wrap: wrap) {
  /* line 5, ../sass/test.scss */
  .wrapper {
    display: flex;
  }
}

/* line 9, ../sass/test.scss */
.a, .b, .c {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
@supports (display: flex) and (flex-wrap: wrap) {
  /* line 9, ../sass/test.scss */
  .a, .b, .c {
    display: flex;
  }
}
/* line 13, ../sass/test.scss */
.a div, .b div, .c div {
  border: 1px solid;
  -webkit-flex: 1 0 100%;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
}

/* Fancy it up! */
/* line 21, ../sass/test.scss */
.a {
  background: #ff9999;
  -webkit-flex: 1 1 10em;
  -ms-flex: 1 1 10em;
  flex: 1 1 10em;
}

/* line 26, ../sass/test.scss */
.b {
  background: #00e600;
  -webkit-flex: 1 1 10em;
  -ms-flex: 1 1 10em;
  flex: 1 1 10em;
}

/* line 31, ../sass/test.scss */
.c {
  background: #9999ff;
  -webkit-flex: 1 1 40%;
  -ms-flex: 1 1 40%;
  flex: 1 1 40%;
}

<div class="wrapper">
  <div class="a">
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
  </div>

  <div class="b">
    <div>b</div>
  </div>

  <div class="c">
    <div>c</div>
    <div>c</div>
  </div>
</div>

浏览器支持：Opera，Chrome，IE10。当Firefox最终完成支持当前的Flexbox草案包括 flex-wrap时，它也将在那里工作。

Answer 2

你基本上必须假装它。你需要确保三列有包装 - 并且整个事物周围有一个包装器。然后，您可以执行CSS Faux columns之类的操作，使第二列看起来与其他两列一样高。

Answer 3

根据一些人的推荐，我最终使用了一些简单的javascript来完成这项工作：

$(document).ready(function() {
   var c1Rows = $(".col1 .row").length;
   var c3Rows = $(".col3 .row").length;

   var minHeight = 50;
   var max = Math.max(c1Rows, c3Rows);
   var totalHeight = max * minHeight;

   $(".col1 .row").css("height", totalHeight / c1Rows);
   $(".col2 .row").css("height", totalHeight);
   $(".col3 .row").css("height", totalHeight / c3Rows);
});