Posizione: altezza assoluta e genitore?

Ho alcuni contenitori ei loro figli sono solo in posizione assoluta / relativa. Come impostare l'altezza dei contenitori in modo che i loro figli siano dentro di loro?

Ecco il codice:

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

Ecco un jsfiddle. Voglio che il testo "barra" appaia tra 4 quadrati, non dietro di essi.

http://jsfiddle.net/Ht9Qy/

Qualche soluzione facile?

Nota che non conosco l'altezza di questi bambini e non posso impostare l'altezza: xxx per i contenitori.

Se capisco cosa stai cercando di fare correttamente, allora non penso che questo sia possibile con i CSS mantenendo i bambini in posizione assoluta.

Gli elementi in posizione assoluta vengono completamente rimossi dal flusso del documento e quindi le loro dimensioni non possono alterare le dimensioni dei loro genitori.

Se davvero dovessi ottenere questo effetto mantenendo i figli come position: absolute, puoi farlo con JavaScript trovando l'altezza dei figli posizionati in modo assoluto dopo che hanno eseguito il rendering e usandola per impostare l'altezza del genitore.

In alternativa, usa semplicemente float: left/ float:righte i margini per ottenere lo stesso effetto di posizionamento mantenendo i figli nel flusso del documento, puoi quindi usare overflow: hiddensul genitore (o qualsiasi altra tecnica clearfix) per far sì che la sua altezza si espanda a quella dei suoi figli.

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

Ecco la mia soluzione alternativa,
nel tuo esempio puoi aggiungere un terzo elemento con "stessi stili" di .one & .two elementi, ma senza la posizione assoluta e con visibilità nascosta:

HTML

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

CSS

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

Questa è una risposta tardiva, ma guardando il codice sorgente, ho notato che quando il video è a schermo intero, la classe "mejs-container-fullscreen" viene aggiunta all'elemento "mejs-container". È così possibile modificare lo stile in base a questa classe.

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

Inoltre, se desideri rendere fluido il tuo video MediaElement utilizzando CSS, di seguito è riportato un ottimo trucco di Chris Coyier: http://css-tricks.com/rundown-of-handling-forrect-media/

Basta aggiungere questo al tuo 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;
}

Spero possa essere d'aiuto.

Questo tipo di problema di layout può essere risolto con flexbox ora, evitando la necessità di conoscere le altezze o controllare il layout con posizionamento assoluto o float. La domanda principale di OP era come convincere un genitore a contenere figli di altezza sconosciuta e volevano farlo all'interno di un certo layout. L'impostazione dell'altezza del contenitore padre su "fit-content" fa questo; l'uso di "display: flex" e "justify-content: space-between" produce il layout di sezione / colonna che penso che l'OP stesse cercando di creare.

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

Ho modificato il violino dell'OP: http://jsfiddle.net/taL4s9fj/

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

Questa è un'altra risposta tardiva, ma ho trovato un modo abbastanza semplice per posizionare il testo "bar" tra i quattro quadrati. Ecco le modifiche che ho apportato; Nella sezione bar ho inserito il testo "bar" all'interno di un tag center e div.

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

E nella sezione CSS ho creato una classe "bar" che viene utilizzata nel tag div sopra. Dopo aver aggiunto questo, il testo della barra è stato centrato tra i quattro blocchi colorati.

.bar{
    position: relative;
}