Comment faire une div flottante à 100% de la hauteur de son parent?

Voici le HTML:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

Et voici le CSS:

#inner {
  float: left;
  height: 100%;
}

Lors de l'inspection avec les outils de développement Chrome, la div intérieure obtient une hauteur de 0 px.

Comment puis-je le forcer à 100% de la hauteur du div parent?

Pour que la #outerhauteur soit basée sur son contenu et ait #innersa hauteur sur celle-ci, placez les deux éléments de manière absolue.

Plus de détails peuvent être trouvés dans la spécification de la propriété css height , mais #innerdoivent essentiellement ignorer la #outerhauteur si sa #outerhauteur est auto, sauf si elle #outer est positionnée de manière absolue. La #innerhauteur sera alors de 0, à moins qu'elle #inner ne soit positionnée absolument.

<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 #innerabsolument, un floatparamètre sera ignoré, vous devrez donc choisir une largeur pour #innerexplicitement et ajouter un remplissage #outerpour simuler l'habillage du texte que je soupçonne que vous voulez. Par exemple, ci-dessous, le remplissage de #outerest la largeur de #inner+3. De manière pratique (comme le but était d'obtenir une #innerhauteur à 100%), il n'est pas nécessaire d'envelopper le texte en dessous #inner, donc cela ressemblera à ce qui #innerest 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 elle était basée sur trop d'hypothèses erronées sur votre objectif.

Pour le parent:

display: flex;

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

Edit: Seul inconvénient est IE comme d'habitude, IE9 ne prend pas en charge flex. http://caniuse.com/flexbox

Edit 2: Comme l'a noté @toddsby, aligner les éléments est pour le parent, et sa valeur par défaut est en fait stretch . Si vous souhaitez une valeur différente pour enfant, il existe une propriété align-self.

Edit 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

En fait, tant que l'élément parent est positionné, vous pouvez définir la hauteur de l'enfant à 100%. À savoir, au cas où vous ne voudriez pas que le parent soit absolument positionné. Permettez-moi d'expliquer davantage:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        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>
</div>

Tant que vous n'avez pas besoin de prendre en charge les versions d'Internet Explorer antérieures à IE8, vous pouvez utiliser display: table-cell pour cela:

HTML:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS:

.inner {
    display: table-cell;
}

Cela forcera chaque élément de la .innerclasse à occuper toute la hauteur de son élément parent.

J'ai fait un exemple pour résoudre votre problème.

Vous devez faire un wrapper, le faire flotter, puis positionner en absolu votre div et lui donner 100% de 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: le div .right est absolument positionné. Cela signifie que sa largeur et sa hauteur, ainsi que les positions en haut et à gauche seront calculées sur la base du premier div parent absolument ou relatif positionné UNIQUEMENT si les propriétés de largeur ou de hauteur sont explicitement déclarées en CSS; si elles ne sont pas explicitement déclarées, ces propriétés seront calculées en fonction du conteneur parent (.right-wrapper).

Ainsi, la hauteur de 100% du DIV sera calculée en fonction de la hauteur finale du .container et la position finale de la position .right sera calculée en fonction du conteneur parent.

Ici, c'est un moyen plus simple d'y parvenir:

1. Définir l'affichage du conteneur des trois éléments (#outer): table
2. Et définissez les éléments eux-mêmes (#inner): table-cell
3. Retirez le flottant.
4. Succès.

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

Merci à @Itay in Div flotté , 100% hauteur

Si vous êtes prêt à utiliser un petit jQuery, la réponse est simple!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

Cela fonctionne bien pour faire flotter un seul élément sur un côté avec 100% de hauteur de son parent tandis que les autres éléments flottants qui devraient normalement s'enrouler sont conservés d'un côté.

J'espère que cela aide les autres fans de jQuery.

Il s'agit d'un exemple de code pour un système de grille de même hauteur.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

Ci-dessus est le CSS pour div externe

#inner{
width: 20%;
float: left;
border: 1px solid;
}

Ci-dessus est le div intérieur

J'espère que cela vous aidera

Cela m'a aidé.

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

Changez à droite: et à gauche: pour définir la largeur préférable #inner.

Un cas similaire lorsque vous avez besoin de plusieurs éléments enfants ayant la même hauteur peut être résolu avec flexbox:

https://css-tricks.com/using-flexbox/

Définis display: flex;pour les éléments parents et flex: 1;enfants, ils auront tous la même hauteur.

essayer

#outer{overflow: auto;}

afficher plus d'options dans: Comment empêcher les parents d'éléments flottants de s'effondrer?