Vraag Strek de lengte van de onderliggende div. Om de ouder met een dynamische hoogte te vullen


Zoals het in de volgende viool te zien is, heb ik er twee divs, vervat in een ouder div die zich hebben uitgestrekt om de grote div te bevatten, mijn doel is om dat kind te maken divs gelijk in hoogte.

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


66
2017-07-27 16:40


oorsprong


antwoorden:


De oplossing is om te gebruiken display: table-cell om die elementen inline in plaats van te gebruiken display: inline-block of 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>

Fiddle aan het werk


39
2017-11-04 13:44



Gebruik display: flex om je uit te rekken divs:

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

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

JSFIDDLE


37
2017-08-12 15:31



Voeg de volgende CSS toe:

Voor de bovenliggende div:

style="display: flex;"

Voor child div:

style="align-items: stretch;"

7
2017-12-03 13:10



Je kunt het gemakkelijk doen met een beetje jQuery

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});

-2
2017-08-25 19:10