html - 如何通过 CSS 对齐父级 "relative"之外高度未知的绝对 DIV？

Question

考虑一个简单的 example用 html

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

和CSS

.parent{
    position:relative;
    background:red;
    width:200px;
    height:40px;
}
.child{
    position:absolute;
    top:40px;
    left:30px;
    width:70px;
    height:70px;
    background:blue;
}

将绝对位置的 DIV 放置在其父级(具有相对位置)的正下方。

在这个例子中，我将绝对值的顶部等于父级相对值的高度。

当高度未知(父子)时，如何在父级下方对齐绝对DIV？

Answer 1

没想到this我自己会工作，但它似乎:

html, body {
    height: 100%;
}
.parent{
    position:relative;
    background:red;
    width:200px;
    height:40px;
}
.child{
    position:absolute;
    top:100%;
    left:30px;
    width:70px;
    height:70px;
    background:blue;
}