Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我最初的想法是在容器元素中添加一个类，该元素具有驻留在其中的子元素的数量（即class="container-element elements-3"），并使子元素的高度百分比因此类而异。

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

旁注：这必须在IE10中运行

Jsfiddle

Answer 1

这是flexbox的经典案例。 Flexbox partially supported by IE10使用-ms- prefix，因此这应该适用于IE10（我无法检查）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

当父元素具有固定高度

2 个答案: