html - 根据子元素的高度(绝对位置)增加元素的父元素高度(相对位置)

Question

如何根据具有绝对位置的子元素高度增加具有相对位置的父元素的高度。
在我下面的示例中， 的高度.parent 元素显示为 0px

PS: I do not want to use any script

预期:

我得到了什么:

jsFiddle
HTML:

<div class="parent">
    <div class="child" style="top:20px;">Hello</div>
    <div class="child" style="top:40px;">Some content</div>
    <div class="child" style="top:60px;">Some more content</div>
</div>

CSS:

.parent{position:relative;background:green;height:100%;border:1px solid #000000;width:250px;}
.child{position:absolute;}

Answer 1

改 height:100%至 height:100px或随心所欲，在父类中
因为绝对位置没有任何高度，您应该为父级定义高度。

.parent{
    position:relative;
    background:green;
    height:100px;
    border:1px solid #000000;
    width:250px;
 }