É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/

css html

— Khaled
source

2

vérifiez ces questions: stackoverflow.com/questions/3049783/… , stackoverflow.com/questions/1575141/… , stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@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

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>

Développer l'extrait

Violon de travail

— Monsieur green
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
source

18

Ajoutez le CSS suivant:

Pour la div parent:

style="display: flex;"

Pour div enfant:

style="align-items: stretch;"

— Ayan
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
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
source

3

Bien qu'une fois la fenêtre du navigateur redimensionnée, cela se cassera, tandis que les CSS fonctionneront toujours.

— SharpC