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


256

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?


1
Donc, vous voulez que le texte dans le div extérieur (pas dans le div intérieur), mais le div intérieur flottant soit la hauteur du div extérieur?
edl

Quel est le résultat final que vous essayez d'atteindre? Je suppose que ma confusion réside dans le fait que si le div intérieur est aussi haut que l'extérieur et l'extérieur est aussi haut que le texte, n'est-ce pas la même chose que d'avoir le texte dans le div intérieur?
edl

2
@edl: Oui, c'est :) La raison pour laquelle je le veux de cette façon est que le div intérieur a une image comme arrière-plan. Le texte doit être à côté. Les deux doivent être à l'intérieur du div externe car il a également une image d'arrière-plan.
Nathan Osman


2
Voir et essayer les réponses à cette question était tout simplement déprimant.
EternalHour

Réponses:


125

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.


118
Hmm .. la question concernait les div flottants. Vous avez répondu à propos des diviseurs de position absolue
Mihkel L.

57
Je n'arrête jamais de surprendre à quel point il est complexe de réaliser des choses incroyablement simples en HTML/CSS:)
Yuriy Nakonechnyy

15
Est-il possible de le faire sans largeurs de codage en dur? Pas génial pour les conteneurs réactifs.
Jake Wilson

23
Je ne sais pas pourquoi cela a été accepté et voté autant. La question concerne les divs flottants, ce qui m'a amené ici de ma recherche, et à la place cela répond à des divs absolument positionnés.
Matt K

2
Comment faire en sorte qu'un conteneur flottant s'adapte verticalement à son conteneur? En ne le faisant plus flotter! Haha. Bel essai, et assez proche pour être considéré comme utile, en fait.
Rolf

124

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/


3
Vous devez souligner que cela ne fonctionne que dans les navigateurs modernes et nécessite même des préfixes de fournisseur.
kontur

12
Je suis surpris que cette solution n'ait pas reçu plus d'attention, étant donné que la question initiale nécessite que la division enfant soit flottante et toute la position: les solutions absolues jettent vraiment une clé dans les travaux dans la plupart des situations où vous utiliseriez float. Cette solution fournit une excellente solution où les effets secondaires de la position: l'absolu ne sont pas un problème et si vous êtes prêt à creuser un peu plus, il est possible d'obtenir une assez bonne compatibilité entre les navigateurs.
Luke

Telle est la réponse ici. IE9 sortira assez tôt, pourrait aussi bien l'aider en lui donnant un bon coup de pied solide. Cette solution est tellement agréable, simple et facile ... J'ai fini de pirater des solutions alternatives. ;)
jrista

2
Selon la spécification la plus récente pour Flexbox: voir w3.org/TR/css-flexbox-1/#align-items-property . align-items: stretch;n'est pas requis car il s'agit de la valeur par défaut. Il doit également être défini sur le parent et non sur l'enfant.
toddsby

1
Ajout d'un violon en réponse. @Tigran
Aiphee

77

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>

14
Cool, c'est moins limitatif que l'exigence de Chadwick position:absolute(qui pourrait interférer avec les styles d'un site)
henry

3
Cela pourrait être juste moi, mais j'ai des problèmes si la barre latérale est plus grande que le contenu. Une couleur d'arrière-plan s'arrêtera au conteneur parent mais le contenu de la barre latérale débordera à l'extérieur du parent.
Howdy_McGee

Il s'agit d'une solution beaucoup plus flexible, et même si vous avez plusieurs éléments enfants flottants, il semble un inconvénient acceptable de styliser leur décalage en position absolue. +1
kontur

Merci très bien. J'ai posté ma solution spécifique comme réponse à une autre question sur SO: stackoverflow.com/a/31749164/84661 .
Brian Haak

24

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.


Bien que cela fonctionne, il n'affichera pas de marge, même si vous en spécifiez une. Cette solution échouera donc si vous souhaitez attribuer une marge. Vous pouvez attribuer un remplissage comme solution de contournement, mais comment résoudriez-vous cela si vous aviez besoin d'une marge (et non d'un remplissage)?
Devner

13
Est-ce que j'ai râté quelque chose? Votre question demande qu'un élément flottant ait une hauteur de 100%. Lorsqu'il flotte, un display: table-cell;élément ne remplit plus la hauteur de son conteneur? Je dois manquer quelque chose, car c'est votre propre question ...?
user56reinstatemonica8

16

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.


1
Il s'agit d'une solution solide pour les situations dans lesquelles vous pouvez garantir que le .rightcontenu de la .leftcolonne est plus court que le contenu de la colonne. Par exemple, si vous l'utilisez sur un composant dans lequel la .leftcolonne a un contenu de taille variable et la colonne de droite affiche simplement une flèche vers une page de détail, alors cette solution fonctionne bien. +1 pour cela
Zachary Kniebel

15

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


8

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.


18
Il semble exagéré de lancer javascript à ce problème de mise en page.
kontur

1
En tant que personne qui doit se développer dans IE: MERCI!
Rook

1
Un peu exagéré peut-être, mais c'est une belle réponse, merci!
Martin

1
Je suis d'accord que tous les problèmes de positionnement doivent être résolus sans JS.
michaeluskov

1
Il est exagéré d'utiliser JS ET jQuery
ViliusL

3

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


1

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.


1

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.


-1

essayer

#outer{overflow: auto;}

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


l'option "débordement: caché" semble mieux fonctionner car il n'y a aucune chance de rouler ...
Rodrigo Barreiro

Si vous avez trouvé une meilleure solution, vous pouvez modifier votre réponse. En outre, il serait bon que vous ajoutiez plus d'informations à votre réponse, comme par exemple les informations fournies dans le lien.
Donald Duck
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.