Equally distributing height with CSS

问题:

I have an HTML problem that is pretty tricky and I'm not sure there is a CSS-based solution for it. Basically I have a three column grid. The first and third columns can contain a variable number of rows in them. The second column always has exactly one row. Each row has a minimum height.

So the column with the most rows will have all the rows with height set to the minimum height. The rows in the other columns should expand equally in height to take up the remaining space.

Say that column one has three rows, each 50px tall. Column two must have one row 150px tall. If column three has 2 rows they must each be 75px tall. Below are some pictures to further illustrate what I'm after.

Is this even possible with CSS?

回答1:

If you don't mind only working in a small handful of browsers, then you can absolutely do this with pure CSS. Go ahead, add and remove as many grandchild divs as you want:

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>

Browser support: Opera, Chrome, IE10. When Firefox finally gets around to finishing supporting the current Flexbox draft including flex-wrap, then it will work there as well.

回答2:

You will basically have to fake it. You will need to be sure that the three columns have wrappers - and that there is one wrapper around the whole thing. Then you can do something like CSS Faux columns to make the second column appear as tall as the other two.

回答3:

Per recommendations by a few folks, I ended up using some simple javascript to get this done:

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