web-dev-qa-db-fra.com

Étirer la hauteur de la div de l'enfant pour remplir le parent ayant une hauteur dynamique

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

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

csscss3html
76
Khaled

La solution consiste à utiliser display: table-cell pour intégrer ces éléments en ligne au lieu d'utiliser display: inline-block ou 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>

Travailler Fiddle

43
Mr_Green

Utilisez display: flex pour étirer votre divs:

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

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

JSFIDDLE

48
Trong Lam Phan

Ajoutez le CSS suivant:

Pour le parent div:

style="display: flex;"

Pour enfant div:

style="align-items: stretch;"
11
Ayan

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

une réflexion Vous pouvez utiliser l'affichage sous forme de grille

parent { display: grid };

}

0
Gelo K