Comment faire une div floated 100% Hauteur de son parent?

voici le HTML:

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

Et voici la CSS:

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

après inspection avec les outils de développement Chrome, la div interne obtient une hauteur de 0px.

Comment puis-je forcer à être 100% de la hauteur de la div mère?

242
demandé sur Mosh Feu 2010-06-16 03:24:24

11 réponses

pour #outer hauteur à être basée sur son contenu, et avoir #inner base sa hauteur sur cela, faire les deux éléments absolument positionné.

plus de détails peuvent être trouvés dans la spécification pour la CSS hauteur propriété , mais essentiellement, #inner doit ignorer #outer hauteur si" 151920920 'S hauteur est auto , à moins que #outer est positionné absolument. Alors #inner hauteur sera be 0, sauf si #inner lui-même est positionné 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>

However... En positionnant #inner absolument, un réglage float sera ignoré, donc vous aurez besoin de choisir une largeur pour #inner explicitement, et d'ajouter du rembourrage dans #outer pour simuler l'emballage du texte que je soupçonne que vous voulez. Par exemple, ci-dessous, le rembourrage de #outer est la largeur de #inner +3. Idéalement (comme le but était d'obtenir #inner hauteur à 100%) il n'y a pas besoin d'envelopper le texte sous #inner , donc cela ressemblera à #inner est flotté.

<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 de fausses hypothèses au sujet de votre objectif.

123
répondu Chadwick 2015-06-04 02:00:05

pour le parent:

display: flex;

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

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

Edit 2: Comme @toddsby l'a noté, align items est pour parent, et sa valeur par défaut est en fait stretch . Si vous voulez une valeur différente pour enfant, il est d'aligner-auto de la propriété.

111
répondu Aiphee 2017-09-10 07:04:04

en fait, tant que l'élément parent est positionné, vous pouvez régler la taille de l'enfant à 100%. À savoir, au cas où vous ne voulez pas que le parent soit absolument positionné. Permettez-moi d'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>
72
répondu Nathaniel Schweinberg 2015-06-04 02:03:27

aussi longtemps que vous n'avez pas besoin de supporter des versions D'Internet Explorer plus tôt que 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.

23
répondu Nathan Osman 2013-04-15 20:01:15

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

vous devez faire un papier d'emballage, le faire flotter, puis positionner absolute 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: The .la div droite est absolument positionnée. Cela signifie que sa largeur et de la 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).

ainsi, la hauteur de 100% de la DIV sera calculée sur la base .la hauteur finale du conteneur, et la position finale de .la bonne position sera calculée en fonction du conteneur parent.

15
répondu Mandarinazul 2013-06-17 03:20:06

ici, il est un moyen plus simple d'atteindre que:

  1. régler le contenant des trois éléments (#Extérieur) affichage: table
  2. et régler les éléments eux-mêmes (#inner) display: table-cell
  3. enlever le flottant.
  4. succès.
#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

merci à @Itay dans floated div, 100% Hauteur

15
répondu leopinzon 2017-05-23 12:10:26

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 flotter un élément simple sur un côté avec une hauteur de 100% de son parent tandis que d'autres éléments flottants qui normalement s'enrouler autour sont maintenus à un côté.

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

10
répondu Obi-Dan 2014-09-22 16:08:36

il s'agit d'un échantillon de code pour système de grille de hauteur égale.

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

ci-dessus est le CSS pour la division extérieure

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

ci-dessus est la div interne

Espère que cela vous aider à

3
répondu Biswajit 2018-04-11 10:50:28

Cela m'a aidé.

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

modifier à droite: et à gauche: pour définir préférable #largeur intérieure.

1
répondu sevenkey 2016-06-19 15:05:22

un cas similaire lorsque vous avez besoin de plusieurs éléments enfant ont la même taille peut être résolu avec flexbox:

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

ensemble display: flex; pour parent et flex: 1; pour éléments enfants, ils auront tous la même taille.

0
répondu romaroma 2016-11-30 16:43:50

essayer

#outer{overflow: auto;}

Afficher plus d'options en: comment empêcher les parents d'éléments flottants de s'effondrer?

-1
répondu Rodrigo Barreiro 2017-05-23 12:03:02