html - Position: absolute 和 parent 高度？

Question

我有一些容器，它们的子容器只是绝对/相对定位的。如何设置容器高度以便他们的 child 在其中？

代码如下:

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>  

CSS

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

这是一个 jsfiddle。我希望“条形”文本出现在 4 个方 block 之间，而不是在它们后面。

http://jsfiddle.net/Ht9Qy/

有什么简单的修复方法吗？

请注意，我不知道这些 child 的高度，我无法为容器设置高度:xxx。

Answer 1

2022 年更新。这个答案已有近 10 年历史了。编写它时，我们没有可用的布局技术，如 Flex 或 Grid(它们是黑暗的、hacky/有趣的时代)。

谢天谢地，情况有了很大改善。 Jöcker's answer向您展示如何使用 Grid 实现此布局。如果您可以忍受不支持旧版浏览器，那就改用吧!

---

原始答案

如果我理解您要正确执行的操作，那么我认为在保持子项绝对定位的同时使用 CSS 是不可能的。

绝对定位元素完全从文档流中移除，因此它们的尺寸不能改变其父元素的尺寸。

如果您真的必须在将子项保持为 position: absolute 的同时实现这种效果，您可以使用 JavaScript 通过在之后找到绝对定位的子项的高度来实现他们已经渲染，并使用它来设置父级的高度。

或者，只需使用 float:left/float:right 和 margins 即可获得相同的定位效果，同时让子项保持在文档流中，然后您可以使用 overflow: hidden 在父级(或任何其他 clearfix 技术)上以使其高度扩展到其子级的高度。

article {
    position: relative;
    overflow: hidden;
}

.one {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}