Make div (height) occupe la hauteur restante du parent
J'ai un conteneur div avec deux enfants. Le premier enfant a une taille donnée. Comment puis-je faire en sorte que le deuxième enfant occupe "l'espace libre" du conteneur div sans donner une hauteur spécifique?
Dans l'exemple, le rose div devrait également occuper l'espace blanc.
Similaire à cette question: Comment faire pour que les occupants occupent la hauteur restante?
Mais je ne veux pas donner la position absolue .
L'extension de l'enfant #down Pour remplir l'espace restant de #container Peut être réalisée de différentes manières en fonction de la prise en charge du navigateur que vous souhaitez obtenir et du fait que #up A une hauteur définie ou non. .
Échantillons
.container {
width: 100px;
height: 300px;
border: 1px solid red;
float: left;
}
.up {
background: green;
}
.down {
background: pink;
}
.grid.container {
display: grid;
grid-template-rows: 100px;
}
.flexbox.container {
display: flex;
flex-direction: column;
}
.flexbox.container .down {
flex-grow: 1;
}
.calc .up {
height: 100px;
}
.calc .down {
height: calc(100% - 100px);
}
.overflow.container {
overflow: hidden;
}
.overflow .down {
height: 100%;
}<div class="grid container">
<div class="up">grid
<br />grid
<br />grid
<br />
</div>
<div class="down">grid
<br />grid
<br />grid
<br />
</div>
</div>
<div class="flexbox container">
<div class="up">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
<div class="down">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
</div>
<div class="calc container">
<div class="up">calc
<br />calc
<br />calc
<br />
</div>
<div class="down">calc
<br />calc
<br />calc
<br />
</div>
</div>
<div class="overflow container">
<div class="up">overflow
<br />overflow
<br />overflow
<br />
</div>
<div class="down">overflow
<br />overflow
<br />overflow
<br />
</div>
</div>Grille
La mise en page grid de CSS offre encore une autre option, même si elle n'est peut-être pas aussi simple que le modèle Flexbox. Cependant, il ne nécessite que de styler l'élément conteneur:
.container { display: grid; grid-template-rows: 100px }
Le grid-template-rows Définit la première ligne comme une hauteur fixe de 100 pixels, et les lignes restantes seront automatiquement étirées pour remplir l'espace restant.
Je suis presque sûr que IE11 requiert les préfixes -ms-, Alors assurez-vous de valider les fonctionnalités des navigateurs que vous souhaitez prendre en charge.
Flexbox
Le module CSS3 Module de mise en page de boîte flexible (flexbox) est désormais bien pris en charge et peut être très facile à mettre en œuvre. Parce qu'il est flexible, il fonctionne même lorsque #up N'a pas de hauteur définie.
#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }
Il est important de noter que la prise en charge d'IE10 et d'IE11 pour certaines propriétés flexbox peut être erronée et que IE9 ou une version antérieure n'a aucune prise en charge.
Hauteur calculée
Une autre solution simple consiste à utiliser l’unité fonctionnelle CSS3 calc , comme Alvaro le souligne dans sa réponse , mais nécessite la taille du premier enfant. une valeur connue:
#up { height: 100px; }
#down { height: calc( 100% - 100px ); }
Il est assez largement supporté, avec les seules exceptions notables étant <= IE8 ou Safari 5 (pas de support) et IE9 (support partiel). Quelques autres problèmes incluent l'utilisation de calc avec transform ou box-shadow, assurez-vous donc de le tester dans plusieurs navigateurs. si cela vous concerne.
Autres alternatives
Si une prise en charge plus ancienne est nécessaire, vous pouvez ajouter height:100%; À #down Pour que le div rose ait toute la hauteur, avec une mise en garde. Cela provoquerait un débordement du conteneur, car #up Le repousse.
Par conséquent, vous pouvez ajouter overflow: hidden; Au conteneur pour résoudre ce problème.
Alternativement, si la hauteur de #up Est fixée, vous pouvez la positionner absolument dans le conteneur et ajouter un padding-top à #down.
Et une autre option consisterait à utiliser un affichage sous forme de tableau:
#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}
Cela fait presque deux ans que j'ai posé cette question. Je viens d’arriver avec css calc () qui résout le problème que j’avais eu et j’ai pensé que ce serait bien de l’ajouter au cas où quelqu'un aurait le même problème. (Au fait, j'ai fini par utiliser la position absolue).
http://jsfiddle.net/S8g4E/955/
Voici le css
#up { height:80px;}
#down {
height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}
Et plus d'informations à ce sujet ici: http://css-tricks.com/a-couple-of-use-cases-for-calc/
Prise en charge du navigateur: http://caniuse.com/#feat=calc
Ma réponse utilise uniquement CSS, et n'utilise pas overflow: hidden ou display: table-row. Cela nécessite que le premier enfant ait réellement une taille donnée, mais dans votre question, vous déclarez que seul le deuxième enfant doit avoir sa taille non spécifiée. Je pense donc que vous devriez trouver cela acceptable.
html
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">Text<br />Text<br />Text<br /></div>
</div>
css
#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }
À moins que je ne comprenne mal, vous pouvez simplement ajouter height: 100%; et overflow:hidden; à #down.
#down {
background:pink;
height:100%;
overflow:hidden;
}
Edit: Puisque vous ne voulez pas utiliser overflow:hidden;, vous pouvez utiliser display: table; pour ce scénario; cependant, il n’est pas supporté avant IE 8. ( display: table; support )
#container {
width: 300px;
height: 300px;
border:1px solid red;
display:table;
}
#up {
background: green;
display:table-row;
height:0;
}
#down {
background:pink;
display:table-row;
}
Note: Vous avez dit que vous voulez le #down hauteur à être #container hauteur moins #up la taille. Le display:table; La solution fait exactement cela et this jsfiddle illustrera cela assez clairement.
vérifier la démo - http://jsfiddle.net/S8g4E/6/
utiliser css -
#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}
Vous pouvez utiliser des floats pour pousser du contenu vers le bas:
Vous avez un conteneur de taille fixe:
#container {
width: 300px; height: 300px;
}
Le contenu peut circuler à côté d'un float. Sauf si nous définissons le flotteur sur toute la largeur:
#up {
float: left;
width: 100%;
}
Alors que #up Et #down Partagent la première position, le contenu de #down Ne peut commencer qu'après le bas de la variable #up:
#down {
height:100%;
}