Html CSS底部对齐并推送顶部内容

我有一个具有

最小高度的DIV

。在两个div内

.top

和

.bottom

。我使用的是

位置：绝对；底部：0

将

对齐。底部

与底部对齐。当顶部或底部内容过长时，就会出现问题。这张图片最好解释如下：

在这里您可以看到问题：

---

有什么想法吗？

如果你想得到这个结果，你可以更改你的cssused

table

属性，并更改你的

html

检查到demo

.item {border:1px solid black;min-height:200px;position:relative;width:200px;margin-bottom:10px;display:table;}

.top {display:table-row;vertical-align:top;background-color:#ddd}

.bottom {background-color:yellow;display:table-cell;vertical-align:bottom;}

================演示

.item{边框：1px纯黑色；最小高度：200px；位置：相对；宽度：200px；页边距底部：10px；显示：表格；}
.top{显示：表格行；垂直对齐：top；}
.top>div{背景色：#ddd}
.bottom>div{背景色：黄色；}
.bottom{显示：表格单元格；垂直对齐：底部；}

Lorem ipsum Door sit amet，为精英们献身，为我们奉献。但是，如果你不愿意，那么你可以在实验室里实习。
除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
Lorem ipsum Door sit amet，为精英们献身，为我们奉献。但是，如果你不愿意，那么你可以在实验室里实习。我们要做一个简单的练习。
无过失的圣约翰除外。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个非常小的节日。
除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。两人或两人在一个无教区的房间里互相指责。

这可以通过flexbox轻松完成：

在容器上，只需添加

.item {
    display:flex;
    flex-flow: row wrap;
}

在底部元素上添加：

.bottom {
    align-self: flex-end;
}

.item{
边框：1px纯黑；
最小高度：200px；
显示器：flex；
柔性流：行换行；
宽度：200px；
边际下限：10px
}
.顶{
背景色：#ddd；
}
.底部{
背景颜色：黄色；
自对准：柔性端；
}

Lorem ipsum Door sit amet，为精英们献身，为我们奉献。但是，如果你不愿意，那么你可以在实验室里实习。
除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
Lorem ipsum Door sit amet，为精英们献身，为我们奉献。但是，如果你不愿意，那么你可以在实验室里实习。我们要做一个简单的练习。
无过失的圣约翰除外。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个非常小的节日。
除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。两人或两人在一个无教区的房间里互相指责。

以下是解决方案

CSS:

.item {
    border:1px solid black;
    min-height:200px;
    display:flex;
    flex-flow: row wrap;
    width:200px;
    margin-bottom:10px
}
.top {
    background-color:#ddd;
    align-self: flex-start;
}
.bottom {
    background-color:yellow;
    align-self: flex-end;
    margin-top:10px;
}

---

想要的行为是什么？必须使用position:absolute作为底部div。这不是和我发布的完全一样吗？这正是我想要的！