122

As it can be seen in the following fiddle, I have two divs, contained in a parent div that have stretched to contain the big div, my goal is to make those child divs equal in height.

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

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
Khaled
  • 8,255
  • 11
  • 35
  • 56
  • 2
    check those questions: http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent, http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window, http://stackoverflow.com/questions/13609531/make-an-div-100-height-css – e382df99a7950919789725ceeec126 Jul 27 '13 at 16:53
  • @MikeHometchko there are many on CSS but not on CSS3. I think so. – Mr_Green Nov 04 '13 at 13:33
  • 1
    @Mr_Green the differences at a fundamental level between "CSS" and CSS3 are trivial so I don't see the issue. This is a very common issue that has been asked and answered to death. – Mike H. Nov 04 '13 at 13:35
  • 1
    @MikeHometchko check my solution. I am sure no one has answered the same before. – Mr_Green Nov 04 '13 at 13:44

6 Answers6

68

Use display: flex to stretch your divs:

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

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

JSFIDDLE

Trong Lam Phan
  • 2,292
  • 3
  • 24
  • 51
52

The solution is to use display: table-cell to bring those elements inline instead of using display: inline-block or 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>

Working Fiddle

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
30

Add the following CSS:

For the parent div:

style="display: flex;"

For child div:

style="align-items: stretch;"
Ayan
  • 8,192
  • 4
  • 46
  • 51
  • I needed to add the `stretch` on the children for flex to work for me. – BadHorsie Feb 20 '19 at 13:50
  • 2
    That's works for me, but for `display: grid` which is inside stretched element, I have to add `height: 100%` parameter. The grid contains dynamic height by default also. – Falcon Apr 15 '21 at 11:10
9

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

I think you can use display as grid:

.parent { display: grid };
J.Grim
  • 11
  • 3
HelloGello
  • 361
  • 1
  • 3
  • 11
  • Did you test your answer using the original poster's same code? – Mark Stewart Sep 19 '18 at 14:45
  • It works and doesn't require any CSS on the child. That's because a CSS Grid cell will have `auto` row and cell by default. It actually works pretty nicely with IE if you use `display: -ms-grid` to avoid some flexbugs, as long you only have one child. – ShortFuse Feb 14 '19 at 22:20
0

Add Display:flex to parent, and Align-items: stretch; to child, if you need to cover up the space with elements then also add justify-content: space-between.

Ashutosh Yadav
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 31 '23 at 21:14
-8

You can do it easily with a bit of jQuery

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});
Ziv Weissman
  • 4,400
  • 3
  • 28
  • 61
Levon Matevosyan
  • 21
  • 7
  • 4
    Although once the browser window is resized this will break, whereas the CSS ones will still work. – SharpC Nov 09 '16 at 12:07