html - 如何使具有相对位置的包装 div 元素匹配子元素高度？

Question

我有一个简单的问题，我有 2 个 div，其中 1 个是相对定位的。子元素是绝对定位的。这个 child 的高度不一。

到目前为止的代码:

HTML

<div id="wrap"><div id="inner"></div></div>

CSS

#wrap {
    width: 100%;
    background: #ccc;
    position: relative;
    min-height: 20px;
}

#inner {
    width:30%;
    background: #000;
    position: absolute;
    right: 0;
    top: 0;
    height: 200px;
}

我遇到的问题是 #wrap 元素没有调整其高度以匹配子元素，因此子元素卡在父元素的边缘之外。这可以用相对和绝对定位的元素来完成吗？

我知道这可以通过 float 元素实现，并在它们之后使用 css => cleared: both，但我想知道这种方法是否可行。

我创建了一个 jsfiddle of this problem over here 如果有人愿意帮助我!

非常感谢。

Answer 1

绝对定位元素在流之外，因此 parent 无法调整其高度。

但你可以简单地使用:

#wrap {
    width: 100%; /* useless */
    background: #ccc;
    overflow:hidden; /* establish a new formatting context */
    min-height: 20px;
}

#inner {
    width:30%;
    background: #000;
    float:right;
}