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

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，其中包含驻留在其中的子元素的数量（即class="container-element elements-3"），并使子元素的高度百分比不同基于此 class。

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

旁注：这必须在 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

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

它将在 IE-10 上工作。

将以下属性添加到以下 class

.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;
}

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

Fill out the height of a variable number of child elements, when the parent element has a fixed height

html

css

internet-explorer-10