How to place a div to the height of it's parent div

Question

Using Bootstrap 3.0.2. Want to stretch a div to the height of it's parent div. Not interested to set with a script. Is there any way to do so? Please see the fiddle. Here I want to stretch the blue container to the height of parent green container.

See Fiddle

<div class="row border-green">
    <div class="col-xs-6">
        <div class="border-red">
            aaaa<br>
            bbbb<br>
            cccc
        </div>
        <div class="border-red">
            dddd
        </div>
    </div>
    <div class="col-xs-6 border-blue">
        eeee<br>
        ffff<br>
    </div>
</div>

This worked for me: http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height — Brandon Joyce, Jul 06 '15 at 05:12

score 3 · Accepted Answer · answered Jul 06 '15 at 05:12

3

Give a class to your parent div: equal-height

Add this to your CSS:

.equal-height {
    display: table;
}
.equal-height > div {
    display: table-cell;
    float: none;
    vertical-align: top;
}

http://jsfiddle.net/jpes2wry/3/

answered Jul 06 '15 at 05:12

Samuel Liew

76,741
107
159
260

m4n0 · Answer 2 · 2015-07-06T06:42:06.820

3

Flexible box solution works fine for your problem. Add display: flex to the parent element.

For current readers, Compatibility table: Can I use Flexbox

For future readers, Flexible box is the way to go!

.border-red {
  border-style: solid;
  border-width: 2px;
  border-color: #FF0000;
}
.border-blue {
  border-style: solid;
  border-width: 2px;
  border-color: #2E2EB8;
}
.border-green {
  border-style: solid;
  border-width: 2px;
  border-color: #00CC00;
}
.equal-height {
  display: flex;
  display: -ms-flex;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row border-green equal-height">
  <div class="col-xs-6">
    <div class="border-red">
      aaaa
      <br>bbbb
      <br>cccc
    </div>
    <div class="border-red">
      dddd
    </div>
  </div>
  <div class="col-xs-6 border-blue">
    eeee
    <br>ffff
    <br>
  </div>
</div>

edited Jul 06 '15 at 06:42

answered Jul 06 '15 at 05:14

m4n0

29,823
27
76
89

2

Note that this does not work with IE 9 and earlier, IE 10 requires a prefix like `-ms-flex`. While IE 11 fully supports the flex-property. See more here: http://www.w3schools.com/cssref/css3_pr_flex.asp – Alexander Johansen Jul 06 '15 at 05:29
Thanks, Alexander. I see someone down voted for the incompatibility with IE. – m4n0 Jul 06 '15 at 06:38
2

I upvoted for the simplicity of the solution. I know i am not supposed to express my opinion here but, people using old IE versions should be punished – Alexander Johansen Jul 06 '15 at 06:50
2

@AlexanderJohansen Agreed! Anyone using IE9 is wilfully holding back the web. Those people can live without a full-height section. – Christian Jul 06 '15 at 06:52

score 1 · Answer 3 · answered Jul 06 '15 at 05:19

I just add height to your codes and it works, just try:

.border-red {
   border-style: solid;
   border-width: 2px;
   border-color: #FF0000;
 }
.border-blue {
   border-style: solid;
   border-width: 2px;
   border-color: #2E2EB8;
   height: 100%;
}
.border-green{
   border-style: solid;
   border-width: 2px;
   border-color: #00CC00;
   height: 100px;
 }

How to place a div to the height of it's parent div

3 Answers3