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

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

| 我有一个简单的问题，我有2个div，其中1个是相对定位的。子元素是绝对定位的。这个孩子身高不一。 到目前为止的代码： 的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元素无法调整其高度以匹配子元素，因此子元素悬挂在父元素的边缘之外。可以使用相对和绝对定位的元素来完成此操作吗？ 我知道这可以通过使用浮动元素并在它们之后加上css => clear来实现：两者都可以，但是我想知道这种方法是否可行。 如果有人想帮我，我在这里创建了这个问题的答案！ 非常感谢。     

解决方法

        绝对定位元素不在流程中，因此父母无法调整其高度。 但是您可以简单地使用：

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

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

    ,        不可以，您无法让

position: relative

的父级调整其

height

以适合with5ѭ的子元素。 这是因为：   在绝对定位模型中，   框明确地相对于偏移   到其包含块。它被删除   完全来自正常流量（它具有   对以后的兄弟姐妹没有影响）。一个   绝对定位的盒子建立   一个新的正常流动的容纳块   儿童和绝对（但不是   固定）定位的后代。   但是，绝对的内容   定位的元素不会四处流动   任何其他盒子。 http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning 如果您想坚持使用基于

position

的代码，则必须使用JavaScript设置父级

div

的

height

。 否则，如果适合您的情况，请坚持使用

float

。 @MatTheCat的答案对我来说很好。 仅出于完整性考虑，以下是@MatTheCat答案的演示，其中添加了

height: 200px

，因此您可以看到父级

div

确实在ѭ4adjust中进行了调整：http://jsfiddle.net/gR2wL/3/