位置：绝对和家长的高度？(Position: absolute and parent height?

我有一些容器和他们的孩子是唯一的绝对/相对定位。 如何设置容器高度，使他们的孩子将是他们的内部？

下面的代码：

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:

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

绝对定位元件被完全从文件流中除去，并且因此它们的尺寸不能改变他们的父母的尺寸。

如果你真的有实现这种影响，同时保持孩子position: absolute ，你只能找他们渲染后的绝对定位的儿童的身高，并用它来设置父的高度用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;
}

Answer 2:

这里是我的解决办法，
在您的例子中，你可以添加第三个要素。一是用。二和元素的“同一风格”，但没有绝对的位置，并与隐藏的可见性：

HTML

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

CSS

.three{
    height: 30px;
    z-index: -1;
    visibility: hidden;
}

Answer 3:

这是一个迟到的答案，但通过查看源代码，我注意到，当视频全屏时，“MEJS容器全屏”类添加到“MEJS容器”元素。 因此，可以改变基于这个类的样式。

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

此外，如果你想使用CSS来让你的MediaElement视频液，以下是克里斯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 4:

这又是一个迟到的答案，但我想通了放置“栏中的”文本中的四个方格之间的一个相当简单的方式。 下面是我所做的更改; 在酒吧第一节包裹中心和div标签内的“酒吧”的文字。

<header><center><div class="bar">bar</div></center></header>

而在CSS部分我创建它上面的div标签使用的“酒吧”类。 加上在此之后，栏文本中的四种颜色块之间居中。

.bar{
    position: relative;
}

文章来源: Position: absolute and parent height?