嵌套容器上的高度相同

此代码确保所有嵌套容器始终具有相同的高度。这是通过确保所有嵌套元素与包含 parrent div 的高度相同来完成的。参见工作示例https//jsfiddle.net/3wwh7ewp/

由于属性 align-items 默认设置为 stretch,因此实现了此效果。

HTML

<div class="container">
  <div style="background-color: red">
    Some <br />
    data <br />
    to make<br />
    a height <br />
 </div>
  <div style="background-color: blue">
    Fewer <br />
    lines <br />
 </div>
</div>

CSS

.container {
    display: flex;
    align-items: stretch; // Default value
}

注意: 不适用于 10 以下的 IE 版本