Adjusting height of all child divs to 100% parent height

Question

I've been struggling with this little CSS issue. I want all of the child divs of 'col3' to be the same height. Thus, the borders on each will stretch from top to bottom.

I found this similar question, but this doesn't seem to address multiple columns, and the link is broken :( -- How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

<div class="container">
<div class="col3">
                <div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta.
                    </p>
                </div>
                <div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta. Duis interdum suscipit dui et pulvinar. Curabitur turpis nisi, congue vel aliquet et, iaculis in leo. Maecenas pellentesque felis eget lectus viverra feugiat. In hac habitasse platea dictumst. Integer eget accumsan risus. Fusce ac lectus odio, non placerat tortor. 
                    </p>
                </div>  
                <div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta. Duis interdum suscipit dui et pulvinar. Curabitur turpis nisi, congue vel aliquet et, iaculis in leo. Maecenas pellentesque felis eget lectus viverra feugiat. In hac habitasse platea dictumst. Integer eget accumsan risus. Fusce ac lectus odio, non placerat tortor.
                    </p>
                </div>
            </div>

Here is a jsFiddle: http://jsfiddle.net/wUtk9/1/ -- I have provided two examples, one with the typical three-column layout and another with a column spanning across two-columns. Much like a "colspan" for tables.

Would this be ideal to use jQuery to resolve?

If you only have 3 div containers inside of col3, and the .container parent has a set height, then how about setting 33% height for each of the child divs? — klewis, Apr 03 '13 at 14:08

Pete · Accepted Answer · 2013-04-03T14:25:58.227

2

If you aren't bothered about IE7, you can use the following styles:

div.col3 {
    display:table;
}

.col3 > div {
    display:table-cell;
}

http://jsfiddle.net/wUtk9/8/

UPDATE

http://jsfiddle.net/wUtk9/10/ (Multi-row layout)

http://jsfiddle.net/wUtk9/11/ (jQuery version)

edited Apr 03 '13 at 14:25

answered Apr 03 '13 at 14:05

Pete

57,112
28
117
166

Thanks, the jQuery version seems to work flawlessly. That makes sense, thanks for the lesson. – TurboSupra Apr 03 '13 at 17:02

score 0 · Answer 2 · answered Apr 03 '13 at 13:55

0

Try this:

var maxHeight=0;
$('div.col3 div').each(function(){
    if( $(this).height() > maxHeight ) maxHeight = $(this).height();
});
$('div.col3 div').height(maxHeight);

jsFiddle example

answered Apr 03 '13 at 13:55

j08691

204,283
31
260
272

That works to an extent, if you look at the an example with the row covering 3 columns, the height is a bit much. So on a full table, all of the divs will be the same height. I suppose, some if statements would resolve the issue. - http://jsfiddle.net/wUtk9/7/ – TurboSupra Apr 03 '13 at 14:04
But isn't what what you asked for? – j08691 Apr 03 '13 at 14:07
Sorry, trying to express in words is difficult. Each row should be the height of the tallest child. So, the single column row (.span3) should only be the height of the text. – TurboSupra Apr 03 '13 at 14:08

Adjusting height of all child divs to 100% parent height

2 Answers2