如何将内部 <div> 发送到其父 <div> 的底部？

Question

另一个div图片和下面代码中的div。因为会有父div的文字和图片。红色 div 将是父 div 的最后一个元素。

 <div style="width: 200px; height: 150px; border: 1px solid black;">
  <div style="width: 100%; height: 50px; border: 1px solid red;">
  </div>
</div>

原文由 uzay95 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一种方式

 <div style="position: relative;
                width: 200px;
                height: 150px;
                border: 1px solid black;">

  <div style="position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 50px;
                    border: 1px solid red;">
  </div>
</div>

但是因为内部 div 是绝对定位的，所以您总是需要担心外部 div 中的其他内容与它重叠（并且您总是必须设置固定的高度）。

如果可以的话，最好使内部 div 成为外部 div 中的最后一个 DOM 对象，并将其设置为“clear: both”。

原文由 Jon Smock 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

弹性盒方式。

 .parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  not necessary, just to visualize it */
.parent {
  height: 500px;
  border: 1px solid black;
}

.parent div {
  border: 1px solid red;
}

 <div class="parent">
  <div>Images, text, buttons oh my!</div>
  <div>Bottom</div>
</div>

编辑：

来源 - Flexbox 指南

浏览器对 flexbox 的支持 - Caniuse

原文由 Franklin Tarter 发布，翻译遵循 CC BY-SA 4.0 许可协议