Html 将多个div与父级的底部对齐

我想将父级底部的3个div与

100%

高度对齐

我试过：

parent {
    height: 100%;
    display: table-cell;
    vertical-align: bottom;
}

但是不起作用

即使您更改窗口的大小或分辨率，它也应该可以工作

---

示例：

您需要指定父级和内容的相对高度，并且

display:table单元格的
div
必须位于
display:table
的元素中

HTML

您可以使用新的

简单应用

display:flex;
flex-direction: column;
justify-content:flex-end;

对于容器
div
，如下所示：


*{
保证金：0；
填充：0；
框大小：边框框；
}
html，
身体{
身高：100%；
}
#容器{
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
身高：100%；
边框：1px实心；
}
.盒子{
高度：50px；
宽度：100%；
边框：1px实心；
}
#框1{
背景：道奇蓝；
}
#框2{
背景：橙色；
}
#框3{
背景：石灰；
}


html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
div {
    display:table;
    height:100%;
}
div div {
    height:100%;
    width:100px;
    border:1px solid black;
    display:table-cell;
    vertical-align:bottom;
}
div div div {
    display:block;
    height:20px;
}

display:flex;
flex-direction: column;
justify-content:flex-end;