Comment faire une hauteur de 100 % de div flottants de son parent ?

Question

Voici le code HTML :

Et voici le CSS :

Lors de l’inspection avec les outils de développement de Chrome, la div interne est d’obtenir une hauteur de 0px.

Comment est-ce que je peux forcer qu’il soit 100 % de la hauteur de la div parent ?

Answer 1

Pour le parent :

Pour les enfants :

Vous devez ajouter des préfixes http://css-tricks.com/using-flexbox/

Edit : Le seul inconvénient est IE comme d’habitude, IE9 ne supporte pas flex. http://caniuse.com/Flexbox

Answer 2

Pour #outer la hauteur en fonction de son contenu, et ont #inner de la base de sa hauteur, de rendre les deux éléments en position absolue.

Plus de détails peuvent être trouvés dans la spec pour le css hauteur de propriété, mais pour l'essentiel, #inner doit ignorer #outer de la hauteur si #outers'hauteur est - auto, à moins d' #outer est en position absolue. Ensuite, #inner de la hauteur sera de 0, à moins d' #inner lui-même est en position absolue.

<style>
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; }
    #inner {position:absolute; height:100%; width:20px; border: 1px solid black; }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

Cependant... En positionnant #inner absolument, float sera ignorée, de sorte que vous aurez besoin de choisir une largeur de #inner explicitement, et ajouter le remplissage en #outer pour le faux de l'habillage de texte je soupçonne que vous voulez. Par exemple, ci-dessous, le rembourrage de l' #outer est la largeur de l' #inner +3. Idéalement (comme le but était d'obtenir de l' #inner de la hauteur à 100%) il n'y a pas besoin de mettre le texte sous #inner, de sorte que cela va ressembler #inner est flottant.

<style>
    #outer2{padding-left: 23px;
            position:absolute; height:auto; width:200px; border: 1px solid red; }
    #inner2{left:0;
            position:absolute; height:100%; width:20px; border: 1px solid black; }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

J'ai supprimé ma réponse précédente, car il est fondé sur un trop grand nombre de fausses hypothèses au sujet de votre but.

Answer 3

En fait, tant que l’élément parent est positionné, vous pouvez définir la taille de l’enfant à 100 %. À savoir, en cas vous ne voulez pas du parent d’être positionnés de manière absolue. Laissez-moi vous expliquer plus loin :

Answer 4

Tant que vous n’avez pas besoin d’appuyer les versions d’Internet Explorer antérieures à la version IE8, vous pouvez utiliser `` pour y parvenir :

HTML :

CSS :

Ceci forcera chaque élément avec la `` classe d’occuper toute la hauteur de son élément parent.

Answer 5

J'ai fait un exemple de résolution de votre problème.

Vous devez faire un wrapper, float, puis la position absolue de votre div et de donner 100% de la hauteur.

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

Explication: La .droit div est en position absolue. Cela signifie que sa largeur et sa hauteur, et en haut et à gauche positiones sera calculed basé sur la première div parent absolue ou relative positionné que si la largeur ou la hauteur propriétés sont déclarées explicitement dans CSS; si elles ne sont pas explicty déclaré, ces propriétés seront calculed basé sur le conteneur parent (.droit-wrapper).

Donc, 100% de la hauteur de la DIV sera calculed basé sur .conteneur de finale de la hauteur et la position finale de .bonne position sera calculed basé sur le conteneur parent.