web-dev-qa-db-fra.com

Comment faire un div flotté 100% 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 division interne prend une hauteur de 0px.

Comment puis-je le forcer à être 100% de la taille de la div parent?

csshtmlheight
249
Nathan Osman

Pour que #outer height soit basé sur son contenu et que #inner base sa hauteur sur celle-ci, positionnez les deux éléments de manière absolue.

Plus de détails peuvent être trouvés dans les spécifications pour propriété css height , mais essentiellement, #inner doit ignorer #outer height si _ la hauteur de #outer est auto , sauf si #outer est positionné absolument. Alors, #inner height sera égal à 0, sauf si #inner lui-même est positionné de manière 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 absolument #inner, un paramètre float sera ignoré. Vous devrez donc choisir une largeur pour #inner explicitement et ajouter un remplissage dans #outer à Faux le texte enveloppant je soupçonne que vous voulez. Par exemple, ci-dessous, le remplissage de #outer est la largeur de #inner +3. De manière pratique (l'objectif étant d'obtenir #inner height à 100%), il n'est pas nécessaire de placer le texte sous #inner, ce qui donne l'impression que #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 elle reposait sur trop d'hypothèses erronées concernant votre objectif.

125
Chadwick

Pour le parent:

display: flex;

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

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

Éditer 2: Comme @toddsby l’a noté, les éléments d’alignement sont destinés au parent et sa valeur par défaut est stretch . Si vous voulez une valeur différente pour child, il existe une propriété align-self.

Éditer 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

117
Aiphee

En réalité, tant que l'élément parent est positionné, vous pouvez définir la taille de l'enfant à 100%. À savoir, au cas où vous ne voudriez pas que le parent soit positionné de manière absolue. Me laisser expliquer plus loin:

<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>
76
Nathaniel Schweinberg

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 accomplir ceci:

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 classe .inner à occuper toute la hauteur de son élément parent.

24
Nathan Osman

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

Vous devez faire une enveloppe, la faire flotter, puis positionner votre div de manière absolue et lui donner une hauteur de 100%.

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 en fonction du premier parent div positionné de manière absolue ou relative UNIQUEMENT si les propriétés width ou height sont explicitement déclarées dans 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% de la DIV sera calculée en fonction de la hauteur finale du conteneur. La position finale de la position .right sera calculée en fonction du conteneur parent.

16
Mandarinazul

Voici un moyen plus simple d'y parvenir:

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

Merci à @Itay in div flottant, hauteur 100%

15
leopinzon

Si vous êtes prêt à utiliser un peu de 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 une hauteur de 100% de son parent, tandis que les autres éléments flottants qui seraient normalement enveloppants sont conservés sur un côté.

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

8
Obi-Dan

Ceci est un exemple de code pour un système de grille de hauteur égale.

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

Ci-dessus est le CSS pour outer div

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

Ci-dessus est la div intérieure

J'espère que cela vous aidera

3
Biswajit

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

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

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

1
romaroma

Cela m'a aidé.

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

Changer à droite: et à gauche: pour définir une largeur préférable.

1
sevenkey