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

Question

在我的一个页面上，我有以下结构，我试图将其用作一种工具提示样式行为。 “child”元素将被隐藏，直到单击“container”元素。 我想要做的是将孩子对准实际容器，但我的问题是孩子可以有一个可变高度，所以我不知道如何正确对齐它。

这是我的概念代码：

<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;
}

基本上我想要做的是将#child的底部与#container的顶部对齐，以便容器可以根据内容的值无法向上扩展。 这可能不会产生预期的结果，但您可以在此处看到：

http://jsfiddle.net/tA9wr/

它只能起作用，因为我特意将#child底值设置为130px。 如果#child中的内容在高度上发生变化，那么这将不再有效。 这是一个快速的MS Paint版本，我希望在＃child的高度变化时发生：

http://i.imgur.com/WxOWRPp.png

任何想法我怎么能完成我想要的？

Answer 1

您需要绝对定位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向上扩展

演示小提琴