如何使包含div元素的相对位置匹配子元素高度？

Question

我有一个简单的问题,我有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 => cleared:both,但我想知道它是否可以使用此方法.

如果有人想帮助我,我已经在这里创建了这个问题的一个小问题!

非常感谢.

Answer 1

绝对定位元素在流动之外,因此父母无法调整其高度.

但你可以简单地使用:

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

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

Answer 2

不,你不能让父母position: relative调整它height以适应子元素position: absolute.

这是因为:

在绝对定位模型中,框相对于其包含块明确偏移.它完全从正常流程中移除(它对后来的兄弟姐妹没有影响).绝对定位的框为正常流动子项和绝对(但不是固定)定位后代建立新的包含块. 但是,绝对定位元素的内容不会围绕任何其他框流动.

http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning

如果您想坚持使用position基于代码的代码,则必须使用JavaScript来设置height父代码div.

否则,float如果它们适用于您的情况,请坚持使用s.@MatTheCat的答案对我来说很好看.

只是为了完整性,这是@ MatTheCat的答案height: 200px添加的演示,所以你可以看到父母div确实调整height:http://jsfiddle.net/gR2wL/3/