填寫子元素的可變數量的高度，當父元件具有固定的高度

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的一個經典案例。 Flexbox的是partially supported by IE10使用-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; 
}