同样分发与CSS高度(Equally distributing height with CSS)

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

所以最行的列将都具有高度设置为最小高度的行。 在另一栏中的行应高度同样扩大占用的剩余空间。

说，一个列有三行，每50像素高。 列中有两个必须有一排高大的150像素。 如果第三列有两行，他们每一个都必须960x75像素高。 下面是一些图片来进一步说明我后。

这甚至可能使用CSS？

Answer 1:

如果你不介意只在浏览器中的极少数工作，那么你完全可以用纯CSS做到这一点。 来吧，添加和删除尽可能多的孙子申报单，只要你想：

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>

浏览器支持：歌剧，铬，IE10。 当Firefox终于得到周围整理支持目前Flexbox的草案包括柔性包装，那么它会在那里工作为好。

Answer 2:

您将基本都可以找到答案。 你需要肯定的是，三列有包装 - 并且有围绕整个事情一个包装。 然后，你可以做一些像CSS仿列 ，使第二栏显示为其他两个一样高。

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);
});

文章来源: Equally distributing height with CSS