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

Question

是否有跨浏览器方法将<div>中的某些内容附加到底部？一个难点是<div>可能会应用任意高度，但我希望某些内容始终固定在其底部。

这可以在这样糟糕的旧时代完成：

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

我可以不借助这种技术吗？

Answer 1

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

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

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

Answer 2

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

我通过使用 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;
}