make child div the same height as parent element

Question

I have parent div with a class row-fluid, I want its child divs to be same height as the parent div.

<div class="row-fluid">    
    <div class="span2">            
    </div>      
    <div class="span7">              
    </div>       
    <div class="span3">                                       
    </div>
</div>

Here is my css code:

.row-fluid{
    float: left;
    width: 100%;
    background: blue;
}


.row-fluid > .span2{
    float: left;
    width: 23.076923076923077%;
    background: red;
}

.row-fluid > .span7{
    float: left;
    width: 48.5%;
    background: yellow;
}


.row-fluid > .span3{
    float: left;
    background: green;
}

Here is the image that illustrates my divs:

enter image description here

The blue region is my parent div and the red, yellow and green region corresponds to its child divs.

Use `display:table` for the parent and `display:table-cell` for the children instead of floating them — Pete, Oct 15 '14 at 09:15
@AlyssaGono, what doesn't work? http://jsfiddle.net/cq7yhnwd/ — Pete, Oct 15 '14 at 09:24
Also have a look at: [How to make a floated div 100% height of its parent?](http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent). — Hashem Qolami, Oct 15 '14 at 09:56
please do not use "bootstrap" tag, use "twitter-bootstrap" as it means something else. — Daniel Cheung, Oct 15 '14 at 10:51

user1438038 · Answer 1 · 2014-10-15T09:27:56.513

1

Why not set a height on your parent div and height: 100% on your child spans?

.row-fluid {
  height: 300px;
}

.row-fluid > .span2,
.row-fluid > .span7,
.row-fluid > .span3 {
  height: 100%;
}

Otherwise, you might wanne have a look at this article.

edited Oct 15 '14 at 09:27

answered Oct 15 '14 at 09:22

user1438038

5,821
6
60
94

No, I cant do that my site must be responsive. – Oct 15 '14 at 09:27
@AlyssaGono Check my edit then, maybe that article helps. – user1438038 Oct 15 '14 at 09:30

make child div the same height as parent element

1 Answers1