位置：绝对和父身高？

Question

我有一些容器，它们的子容器仅处于绝对/相对位置。如何设置容器的高度，使其孩子在容器内？

代码如下：

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个方格之间，而不是它们后面。

http://jsfiddle.net/Ht9Qy/

有简单的解决办法吗？

请注意，我不知道这些孩子的身高，也不能为容器设置身高：xxx。

Answer 1

这是一个迟来的答案，但是通过查看源代码，我注意到当视频全屏时，“mejs-容器-全屏”类被添加到“mejs-容器”元素中。因此，可以根据此类更改样式。

.mejs-container.mejs-container-fullscreen {
    // This rule applies only to the container when in fullscreen
    padding-top: 57%;
}

此外，如果您希望使用CSS使MediaElement视频流畅，下面是Chris Coyier的一个绝妙技巧：http://css-tricks.com/rundown-of-handling-flexible-media/

只需将此添加到您的CSS：

.mejs-container {
    width: 100% !important;
    height: auto !important;
    padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
    width: 100% !important;
    height: 100% !important;
}
.mejs-mediaelement video {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

我希望有帮助。

Answer 2

这是我的解决方法，
在您的示例中，您可以添加具有相同样式的. one的第三个元素

HTML

<article>
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
</article>

CSS

.three{
    height: 30px;
    z-index: -1;
    visibility: hidden;
    width:0!important; /* if you got unnecessary horizontal scroll*/
}

Answer 3

如果我理解你试图正确地做什么，那么我不认为CSS在保持孩子绝对定位的同时是可能的。

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

如果您真的必须在保持子元素为位置：绝对的同时实现这种影响，您可以通过JavaScript找到绝对定位的子元素渲染后的高度，并使用该高度来设置父元素的高度。

或者，只需使用float:left/float:right和边距即可获得相同的定位效果，同时将子项保留在文档流中，然后可以在父项上使用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;
}