使用 CSS 平均分配高度答案

【问题标题】：Equally distributing height with CSS使用 CSS 平均分配高度
【发布时间】：2013-03-01 18:20:45
【问题描述】：

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

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

假设第一列有三行，每行 50 像素高。第二列必须有一行 150 像素高。如果第三列有 2 行，则每行必须为 75px 高。下面是一些图片来进一步说明我所追求的。

这甚至可以通过 CSS 实现吗？

【问题讨论】：

您可以使用标准的“css 等高列”解决方案，然后在这些列中添加 50/50 和 33/33/33 div 以进一步细分。
@MarcB 不，他不能这样做，因为他在 div 中有未定义的行数。难道他不能事先划分高度。这看起来需要 javascript。
@sven: 足够真实，但是 js 会简单地在 CSS 中动态设置 height=totalheight/#rows。等列包装器仍然有效
@OP：你需要相同的行数，还是只需要三个相邻的 div 的高度相同？
第一列和第三列的行数是独立的，可以是 1 到 5 之间的任意值。所以第一列可以有 2 行，第三列可以有 5 行。第二列总是有 1 行。单列中的所有行必须具有相同的高度。

标签： html css grid

【解决方案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，那么它也将在那里工作。

【讨论】：

即使我没有采用此解决方案，也要指出准确的答案。

【解决方案2】：

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

【讨论】：

这并没有解决他的问题，因为内容不会得到调整。正如您所说，人造列只会伪造每个背景的高度。主要问题是计算每一行的高度。
没错，我打算采用“耍花招”的方法，但我并没有真正理解 OP 的目的。要真正做到这一点，OP 将不得不依靠 JS 来进行这样的计算。所以，不，这对于 vanilla CSS 是不可能的。

【解决方案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);
});

【讨论】：