Position : absolue et hauteur du parent ?

Question

J'ai quelques conteneurs et leurs enfants ne sont positionnés que 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 une jsfiddle. Je veux que le texte "bar" apparaisse entre 4 carrés, et non derrière eux.

http://jsfiddle.net/Ht9Qy/

Des solutions faciles ?

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

Answer 1

Si je comprends bien ce que vous essayez de faire, je ne pense pas que cela soit possible avec CSS tout en gardant les enfants en position absolue.

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

Si vous vraiment devait atteindre cet effet tout en gardant les enfants comme position: absolute Pour ce faire, vous pouvez utiliser JavaScript pour déterminer la hauteur des enfants positionnés de manière absolue après leur rendu et l'utiliser pour définir la hauteur du parent.

Sinon, il suffit d'utiliser float: left / float:right et les marges pour obtenir le même effet de positionnement tout en gardant les enfants dans le flux du document, vous pouvez ensuite utiliser la fonction overflow: hidden sur le parent (ou toute autre technique de 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;
}

Answer 2

Voici ma solution de rechange,
Dans votre exemple, vous pouvez ajouter un troisième élément avec "les mêmes styles" des éléments .one & .two, mais sans la position absolue et avec une visibilité caché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;
    width:0!important; /* if you got unnecessary horizontal scroll*/
}

Answer 3

Vous pouvez le faire avec une grille :

article {
    display: grid;
}

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

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

Answer 4

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 donc possible de modifier 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%;
}

Par ailleurs, si vous souhaitez rendre votre vidéo MediaElement fluide à l'aide de CSS, vous trouverez ci-dessous 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 vous aidera.

Answer 5

Ce type de problème de mise en page peut être résolu avec flexbox maintenant, en évitant le besoin de connaître les hauteurs ou de contrôler la mise en page avec un positionnement absolu, ou des flottants. La question principale de l'OP était de savoir comment faire en sorte qu'un parent contienne des enfants de hauteur inconnue, et il voulait le faire dans le cadre d'une certaine mise en page. Le réglage de la hauteur du conteneur parent sur "fit-content" permet d'y parvenir ; l'utilisation de "display : flex" et de "justify-content : space-between" produit la disposition en sections/colonnes que l'OP voulait créer, je pense.

<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/

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