html - 让子元素在父元素高度之间平分

Question

我知道您可以让一个元素的子元素平分父元素的宽度，以便每个元素具有相同的宽度，并用以下内容填充整个父元素的宽度:

#parent {
    display: table;
    table-layout: fixed;
}
.child {
    display: table-cell;
}

但是，我想知道是否有办法在 child 之间平均分配高度。我搜索了 Google 并试图自己找出答案，但想出了什么都没有。

Javascript 和 jQuery 都可以使用，如果需要，几乎可以使用任何其他库。

编辑: child 的数量未知。

编辑 2: 我用 jQuery 找到了自己的解决方案( children 有类 item):

$(".item").css("height", (100 /  $(".item").length) + "%");

它的工作方式似乎与下面描述的柔性盒模型相同。

Answer 1

柔性盒模型(caniuse.com)

最好的解决方案是不在 IE 10- 中工作的解决方案。

那么这是如何工作的，采用以下 HTML:

<div id="container">
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
</div>

你会这样做(解释见下文)

#container{
     display: flex; /* add -webkit and -ms prefixes yourself */
     flex-direction: column;
}
.box{
     flex-grow: 1;
}

因此，我什至不打算详细解释 flexbox 的工作原理，而是解释这段代码。 display:flex 将容器设置为将其子项设置为 flexbox 。接下来 flex-direction: column 使它水平而不是垂直工作，flex-grow: 1 使所有 child 大小相等。如果一个人有 flex-grow:2， children 会这样安排，其中一个会是其他 child 的两倍。

替代方式

在任何浏览器中都可以使用的替代方法当然是在输出代码时计算元素并简单地设置内联 style="height: n%" 或者如果出于某种原因你'你绝对受客户端代码的约束，你总是可以只计算元素的数量，然后设置高度(给出一些类似 $(".box").css("height", Math.floor( 1/$(".box").length * 100) + "px")).