Étirer la hauteur div enfant pour remplir le parent qui a une hauteur dynamique

94

Comme on peut le voir dans le violon suivant, j'ai deux divs, contenus dans un parent divqui se sont étirés pour contenir le grand div, mon objectif est de rendre ces enfants divégaux en hauteur.

http://fiddle.jshell.net/y9bM4/

Khaled
la source
@MikeHometchko il y en a beaucoup sur CSS mais pas sur CSS3. Je le pense.
Mr_Green
1
@Mr_Green les différences à un niveau fondamental entre "CSS" et CSS3 sont triviales donc je ne vois pas le problème. C'est une question très courante qui a été posée et résolue à mort.
Mike H.
1
@MikeHometchko vérifie ma solution. Je suis sûr que personne n'a répondu de la même manière auparavant.
Mr_Green

Réponses:

47

La solution consiste à utiliser display: table-cellpour mettre ces éléments en ligne au lieu d'utiliser display: inline-blockou float: left.

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}
<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

Violon de travail

Monsieur green
la source
Cela ne fonctionne pas si l'élément parent est une cellule de tableau.
Tomáš Zato - Réintégrer Monica
55

Utilisez display: flexpour étirer vos divs:

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

Trong Lam Phan
la source
18

Ajoutez le CSS suivant:

Pour la div parent:

style="display: flex;"

Pour div enfant:

style="align-items: stretch;"
Ayan
la source
J'avais besoin d'ajouter le stretchsur les enfants pour que flex fonctionne pour moi.
BadHorsie
4

https://www.youtube.com/watch?v=jV8B24rSN5o

Je pense que vous pouvez utiliser l'affichage comme grille:

.parent { display: grid };
Gelo K
la source
Avez-vous testé votre réponse en utilisant le même code de l'affiche originale?
Mark Stewart
Cela fonctionne et ne nécessite aucun CSS sur l'enfant. C'est parce qu'une cellule CSS Grid aura une autoligne et une cellule par défaut. Cela fonctionne plutôt bien avec IE si vous utilisez display: -ms-gridpour éviter certains bogues flexibles, tant que vous n'avez qu'un seul enfant.
ShortFuse
-6

Vous pouvez le faire facilement avec un peu de jQuery

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});
Levon Matevosyan
la source
3
Bien qu'une fois la fenêtre du navigateur redimensionnée, cela se cassera, tandis que les CSS fonctionneront toujours.
SharpC