web-dev-qa-db-fra.com

Position: taille absolue et parentale?

J'ai des conteneurs et leurs enfants sont seulement absolus/relativement bien placés. Comment régler la hauteur des contenants 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 hauteur de ces enfants et que je ne peux pas définir height: xxx pour les conteneurs.

htmlcsspositionheightabsolute
82
Wordpressor

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

Les éléments absolument positionnés sont complètement supprimés du flux de documents. Par conséquent, leurs dimensions ne peuvent pas modifier les dimensions de leurs parents.

Si vous vraiment deviez obtenir cet effet tout en conservant les enfants comme position: absolute, vous pouvez le faire avec JavaScript en recherchant la hauteur des enfants positionnés absolument après leur rendu, et en les utilisant définir la hauteur du parent.

Vous pouvez également utiliser float: left/float:right et les marges pour obtenir le même effet de positionnement tout en conservant les enfants dans le flux de documents. Vous pouvez ensuite utiliser overflow: hidden sur le parent (ou toute autre technique de clearfix). ) de faire en sorte que sa taille s’élargisse à 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;
}
78
Tom Davies

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

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

De plus, si vous souhaitez rendre votre vidéo fluide MediaElement en utilisant CSS, voici un excellent tour de Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible- médias/

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 ça aide.

3
user3517189

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 flotteurs. La question principale d'OP était de savoir comment obliger un parent à contenir des enfants de taille inconnue, et ils voulaient le faire dans un certain agencement. Définir la hauteur du conteneur parent sur "fit-content" fait ceci; l'utilisation de "display: flex" et de "justification-contenu: espace-entre" produit la disposition section/colonne que le PO 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/

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

0
Colin Dodgson