Позиция: абсолютная и родительская высота?

У меня есть несколько контейнеров, и их дети только абсолютные / относительно позиционируются. Как установить высоту контейнеров, чтобы их дети находились внутри них?

Вот код:

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/

Какие-нибудь простые исправления?

Обратите внимание, что я не знаю высоты этих дочерних элементов, и я не могу установить height: xxx для контейнеров.

Если я понимаю, что вы пытаетесь сделать правильно, то я не думаю, что это возможно с помощью 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;
}

Вот мой обходной путь.
В вашем примере вы можете добавить третий элемент с «теми же стилями» из .one и .two элементов, но без абсолютной позиции и со скрытой видимостью:

HTML

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

CSS

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

Это запоздалый ответ, но, посмотрев на исходный код, я заметил, что, когда видео находится в полноэкранном режиме, к элементу «mejs-container» добавляется класс «mejs-container-fullscreen». Таким образом, можно изменить стиль на основе этого класса.

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

Кроме того, если вы хотите сделать ваше видео MediaElement плавным с помощью CSS, ниже представлен отличный трюк Криса Койера: http://css-tricks.com/rundown-of-handling-f 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;
}

Я надеюсь, что это помогает.

Такого рода проблему макета можно решить с помощью flexbox, избегая необходимости знать высоту или макет управления с абсолютным позиционированием или плавающими. Главный вопрос OP заключался в том, как заставить родителя содержать потомков неизвестной высоты, и они хотели сделать это в определенном макете. Установка высоты родительского контейнера на «fit-content» делает это; использование «display: flex» и «justify-content: space-between» дает макет раздела / столбца, который, как мне кажется, пытался создать OP.

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

<div style="clear:both">Clear won't do.</div>

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

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
    justify-content: space-between;
    background: whitesmoke;
}
article div { 
    background: yellow;     
    margin:20px;
    width: 30px;
    height: 30px;
    }

.one {
    background: red;
}

.two {
    background: blue;
}

Я изменил скрипку OP: http://jsfiddle.net/taL4s9fj/

css-трюки на flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Вы можете сделать это с помощью сетки:

article {
    display: grid;
}

.one {
    grid-area: 1 / 1 / 2 / 2;
}

.two {
    grid-area: 1 / 1 / 2 / 2;
}

Это еще один поздний ответ, но я придумал довольно простой способ разместить текст «полосы» между четырьмя квадратами. Вот внесенные мной изменения; В секции панели я заключил текст "панели" в теги center и div.

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

И в разделе CSS я создал класс «bar», который используется в теге div выше. После добавления этого текст панели был центрирован между четырьмя цветными блоками.

.bar{
    position: relative;
}