当父元素的高度固定时，填写可变数量的子元素的高度

Question

我有一个具有固定高度的容器元素。 我希望此容器元素的子元素完全填充容器元素的高度，并在子元素之间平均分配高度。 这里的挑战是子元素的数量可以在2到5个元素之间变化。

 .container-element { height: 200px; border: solid black 1px; margin-bottom: 20px; } .child-element { background: grey; } .child-element:nth-child(even) { background: darkGrey; } 

 <div class="container-element"> <div class="child-element"> Dummy content </div> <div class="child-element"> Dummy content </div> <div class="child-element"> Dummy content </div> <div class="child-element"> Dummy content </div> </div> <div class="container-element"> <div class="child-element"> Dummy content2 </div> <div class="child-element"> Dummy content2 </div> </div> 

我最初的想法是向包含内部子元素数的容器元素添加一个类（即class="container-element elements-3" ），并使子元素的高度百分比根据此类而变化。

但是，我想知道是否有可能填充父级的高度，而不管存在多少个子元素，而不必向所有父级容器添加不同的类。

旁注：必须在IE10中使用

的jsfiddle

Answer 1

这是flexbox的经典案例。 IE10使用-ms- prefix 部分支持 -ms- prefix ，因此这应该在IE10中有效（我无法对其进行检查）：

 .container-element { display: -ms-flexbox; /* TWEENER - IE 10 */ display: flex; -ms-flex-direction: column; flex-direction: column; height: 200px; border: solid black 1px; margin-bottom: 20px; } .child-element { -ms-flex: auto 1; flex: 1; background: grey; } .child-element:nth-child(even) { background: darkGrey; } 

 <div class="container-element"> <div class="child-element"> Dummy content </div> <div class="child-element"> Dummy content </div> <div class="child-element"> Dummy content </div> <div class="child-element"> Dummy content </div> </div> <div class="container-element"> <div class="child-element"> Dummy content2 </div> <div class="child-element"> Dummy content2 </div> </div> 

Answer 2

工作提琴： https : //jsfiddle.net/ash06229/urtnw14x/4/

它将在IE-10上运行。

将以下属性添加到以下类别

.container-element {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.child-element {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}