灵活的盒子模型（caniuse.com）

Question

我知道你可以让一个元素的孩子将父母的宽度分开，使每个元素具有相同的宽度，并用以下内容填充父母的宽度：

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

然而，我想知道是否有办法在孩子们之间平均划分身高。我搜索谷歌并试图自己找出来但是想出来了什么都没有。

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

编辑：未知儿童人数。

编辑2：我找到了自己的jQuery解决方案（孩子们有班级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;
}

所以，我甚至不打算详细解释柔性盒的工作原理，而是解释这段代码。 display:flex设置容器以将其子项命名为弹性框。下一个flex-direction: column使其水平工作而不是垂直工作，flex-grow: 1使所有孩子的大小相等。如果有人flex-grow:2，孩子的安排就会使其中一个孩子的体重是其他孩子的两倍。

替代方式

在任何浏览器中使用的替代方法当然是在输出代码时计算元素并简单地设置内联style="height: n%"，或者如果由于某种原因你完全受客户端代码限制，那么你可以总是只计算元素的数量，然后设置高度（给出$(".box").css("height", Math.floor( 1 / $(".box").length * 100) + " px" )行的内容。

Answer 2

HTML

<div id="main" style="height:100%; background:yellow;">
<div ></div>
<div ></div>
<div ></div>
</div>

JS

<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("div"); 
var z = 100/(y.length);
for (i=0; i<y.length; i++)
{
y[i].style.height = z + "%";
}
</script>

让子元素在父母身高之间平分

2 个答案:

灵活的盒子模型（caniuse.com）

替代方式