Html 如何底部对齐元素，使其可以不受限制地垂直展开？

在我的一个页面上，我尝试使用以下结构作为一种工具提示样式的行为。在单击“container”元素之前，“child”元素是隐藏的。我想做的是在实际容器上方对齐子容器，但我的问题是子容器的高度可能会变化，因此我不知道如何正确对齐

这是我的概念代码：

<div id="container">
    <p>Some text</p>
    <div id="child">
        <p>Dynamic text so</p>
        <p>I never know the</p>
        <p>expected height</p>
    </div>
</div>


#container {
    width: 200px;
    height: 40px;
    border: 1px solid blue;
}

#child {
    position: absolute;
    bottom: 40px;
    border: 1px solid #red;
}

一些文本

动态文本

我从来都不知道

期望高度

#容器{
宽度：200px；
高度：40px；
边框：1px纯蓝色；
}
#孩子{
位置：绝对位置；
底部：40px；
边框：1px实心#红色；
}

基本上，我想做的是将#子容器的底部与#容器的顶部对齐，以便容器可以根据内容的值不受限制地向上扩展。这并没有产生预期的结果，但正如您在这里看到的：

它之所以有效，是因为我专门将#child bottom值设置为130px。如果#child中的内容高度发生变化，那么这将不再有效。以下是一个快速的MS绘画版本，我希望随着孩子的身高变化而发生什么：

---

您知道如何实现我想要的吗？

您需要绝对定位div（相对于父对象），并将bottom属性设置为100%（表示父对象的完整高度），以将其放置在容器顶部：

#container {
    margin-top: 100px;
    margin-left: 100px;
    width: 200px;
    height: 40px;
    background: blue;
    position: relative; /*set container to relative */
}

#child {
    width: 300px;
    background: red;
    position: absolute; /* position relative to container*/
    bottom: 100%; /*place bottom at top of container*/
}

这将使

#child

向上扩展

---

您需要绝对定位div（相对于父对象），并将bottom属性设置为100%（表示父对象的完整高度），以将其放置在容器顶部：

#container {
    margin-top: 100px;
    margin-left: 100px;
    width: 200px;
    height: 40px;
    background: blue;
    position: relative; /*set container to relative */
}

#child {
    width: 300px;
    background: red;
    position: absolute; /* position relative to container*/
    bottom: 100%; /*place bottom at top of container*/
}

这将使

#child

向上扩展

---

是否像切换某些文本和#child的顺序那样简单？还是我遗漏了什么？（）它是否像切换某些文本和#child的顺序那样简单？还是我遗漏了什么？太好了！也很简单。谢谢你的帮助！完美的也很简单。谢谢你的帮助！