Position: hauteur absolue et parentale?

J'ai quelques conteneurs et leurs enfants ne sont que positionnés de manière absolue / relative. Comment régler la hauteur des conteneurs pour que leurs enfants soient à l'intérieur?

Voici le code:

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;
}

Voici un jsfiddle. Je veux que le texte "barre" apparaisse entre 4 carrés, pas derrière eux.

http://jsfiddle.net/Ht9Qy/

Des solutions faciles?

Notez que je ne connais pas la taille de ces enfants et que je ne peux pas définir la hauteur: xxx pour les conteneurs.

Si je comprends bien ce que vous essayez de faire, alors je ne pense pas que ce soit possible avec CSS tout en gardant les enfants parfaitement positionnés.

Les éléments positionnés de manière absolue sont complètement supprimés du flux de documents et leurs dimensions ne peuvent donc pas modifier les dimensions de leurs parents.

Si vous deviez vraiment obtenir cet effet tout en conservant les enfants tels position: absolutequels, vous pouvez le faire avec JavaScript en recherchant la hauteur des enfants positionnés de manière absolue après leur rendu, et en l'utilisant pour définir la hauteur du parent.

Vous pouvez également utiliser simplement float: left/ float:rightet les marges pour obtenir le même effet de positionnement tout en gardant les enfants dans le flux de documents, vous pouvez ensuite utiliser overflow: hiddensur le parent (ou toute autre technique clearfix) pour que sa hauteur s'étende à celle de ses enfants.

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;
}

Voici ma solution de contournement,
dans votre exemple, vous pouvez ajouter un troisième élément avec les "mêmes styles" d'éléments .one & .two, mais sans la position absolue et avec une visibilité masquée:

HTML

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

CSS

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

C'est une réponse tardive, mais en regardant le code source, j'ai remarqué que lorsque la vidéo est en plein écran, la classe "mejs-container-fullscreen" est ajoutée à l'élément "mejs-container". Il est ainsi possible de changer le style en fonction de cette classe.

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

Aussi, si vous souhaitez rendre votre vidéo MediaElement fluide en utilisant CSS, voici une excellente astuce de Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media/

Ajoutez simplement ceci à votre 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;
}

J'espère que cela aide.

Ce type de problème de mise en page peut être résolu avec flexbox maintenant, évitant ainsi le besoin de connaître les hauteurs ou de contrôler la mise en page avec un positionnement absolu ou des flotteurs. La principale question d'OP était de savoir comment amener un parent à contenir des enfants de taille inconnue, et ils voulaient le faire dans une certaine disposition. Définir la hauteur du conteneur parent sur "fit-content" le fait; en utilisant "display: flex" et "justify-content: space-between" produit la disposition des sections / colonnes. Je pense que l'OP essayait de créer.

<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;
}

J'ai modifié le violon de l'OP: http://jsfiddle.net/taL4s9fj/

css-tricks sur flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ceci est une autre réponse tardive, mais j'ai trouvé un moyen assez simple de placer le texte "barre" entre les quatre carrés. Voici les modifications que j'ai apportées; Dans la section bar, j'ai enveloppé le texte "bar" dans un centre et des balises div.

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

Et dans la section CSS, j'ai créé une classe "bar" qui est utilisée dans la balise div ci-dessus. Après avoir ajouté cela, le texte de la barre était centré entre les quatre blocs colorés.

.bar{
    position: relative;
}