css - 扩展到最大的包含“定位”块？

Question

在容器中，您可以以任何方式将两个块放在彼此上方（例如绝对）并使容器扩展到最大的大小/高度吗？

如果使用position: absolute容器没有扩展到定位元素的大小。

有没有办法用 CSS 获得这种效果？

---

说明性（已失效）示例：

<div class="wrap">
    <div class="foo">foo</div>
    <div class="bar">bar</div>
</div>

CSS：

.wrap{
    position: relative;
}
.foo{
    height: 40px;
}
.bar{
    height: 60px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

jsfiddle：http: //jsfiddle.net/qjFR9/

我想定位.bar在.foo（位置.bar好像没有.foo）并且.wrap应该是最大孩子的高度。

Answer 1

如果容器的宽度是固定的，则这样的解决方案有效：

<div class="wrap">
    <div class="foo"><div class="inner">foo</div></div>
    <div class="bar"><div class="inner">bar</div></div>
</div>

CSS：

.wrap{
    overflow: auto;
}
.wrap,
.wrap .inner{
    width: 300px;
}
.wrap > div{
    float: left;
    width: 0;
}

/* test: .wrap expands to fit the .inner content */
.bar > .inner{
    height: 60px;
}

jsFiddle 演示。

但这不适用于非固定宽度的包装器。

有没有更好的办法？