根据子元素的高度（绝对位置）增加父元素的高度（相对位置）

Question

如何根据具有绝对位置的子元素高度来增加具有相对位置的父元素的高度。

在我下面的示例中，.parent元素的高度显示为0px

PS：我不想使用任何脚本

预期的：

我得到什么：

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