Stretch child div height to fill dynamic height parent

Question

As the following script shows, I have two div s that are contained in the parent div , which is stretched to contain a large div, my goal is to make those who have the div equal in height.

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

Answer 1

The solution is to use display: table-cell to cast these elements into a string 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 script

Answer 2

Use display: flex to stretch your div :

 div#container { padding:20px; background:#F1F1F1; display: flex; } .content { width:150px; background:#ddd; padding:10px; margin-left: 10px; } 

JSFIDDLE

Answer 3

Add the following CSS:

For parent div:

 style="display: flex;" 

For a child div:

 style="align-items: stretch;" 

Answer 4

The best option to solve this problem is to use display: flex; with property align-items: stretch; . This is similar to @TrongLamPhan's answer, but he did not use align-items: stretch .

Edit: when enabling flexbox with display: flex; the default value for align-items will be stretch , so you do not need to add the align-items: stretch property, because it is the default value. Go vote, someone else will answer.

CSS breakdown:

• on parent-div set display to flex . This will set the parent-div display mode to flexbox, which allows
• align-items property to be used. Set this property to stretch to match the child-div stretch.

CSS Tricks has a pretty good guide to flexbox . I would highly recommend flexbox training in 2017, because its a very powerful layout tool, and it should have been stable in all major browsers for a long time.

 * { font-family: sans-serif; } .parent-div { margin: 0.5em; padding: 0.5em; background-color: #ddd; display: flex; align-items: stretch; } .child-div { flex: 1; /*this property is only here to make each child the same width*/ margin: 0.5em; padding: 0.5em; background-color: #eee; } 

 <div class="parent-div"> <div class="child-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="child-div">This child div should be the same size!</div> </div> 

Answer 5

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

I think you can use a grid view:

 .parent { display: grid }; 

Answer 6

You can do it easily with a little jQuery

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