HTML：父块底部的锚块元素？答案

【问题标题】：HTML: Anchor block element inside bottom of parent block?HTML：父块底部的锚块元素？
【发布时间】：2010-11-30 13:44:43
【问题描述】：

是否有一种跨浏览器方法将<div> 中的一些内容附加到底部？一个困难是<div> 可能应用了任意高度，但我希望始终将某些内容粘贴到它的底部。

这在过去的糟糕日子里会像这样完成：

<table style="height: foo;">
    <tr><td valign="top">content</td></tr>
    <tr><td valign="bottom">stuck to the bottom</td></tr>
</table>

我可以在不使用这种技术的情况下做到这一点吗？

【问题讨论】：

【解决方案1】：

刚刚遇到了同样的问题，但是这个解决方案没有解决，因为孩子没有拉伸父母的整个宽度。

我通过使用 flex 使 child2 粘在 parent 的底部来解决：

<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

#parent {
  display: flex;
  flex-direction: column;
}
#child1 {
  flex-grow: 1;
}

【讨论】：

【解决方案2】：

当然，这很容易。只需将父 div 设置为 position:relative。然后，你要贴在底部的内项，只需使用position:absolute 将其贴到项的底部即可。

<div id="parent">
    <div id="child">
    </div>
</div>

#parent {
  position:relative;
}
#child {
  position:absolute;
  bottom:0;
}

【讨论】：