I have 3 divs in a parent divs like this.

 

I'm using bootstrap and the HTML is something like this:

                <section class="col-md-12">
                    <div class="row2">
                        <div class="register col-md-4">
                            <h4 class="register-heading">Get registered with us</h4>
                            <form action="" method="post">
                            </form>
                        </div>
                        <div class="adspace col-md-4"></div>
                        <div class="market col-md-4">
                            <h4 class="market-heading">Marketplace</h4>
                            <ul class="market-list">
                            </ul>
                        </div>
                    </div>
                </section>

How can I get them all to have the same height? That is 100% height of the parent. I want them all to fill the parent regardless of content.

Have you made sure you defined the height of the parent element? I.e.

 

<div style="height 400px">
<div style="height: 100%"></div>
<div style="height: 100%"></div>
<div style="height: 100%"></div>
</div>

Sorry for the poor code would be better to have classes rather then inline code, just CBA to write it only phone

No I haven't set a height to it as it will most likely need to change with content. So I cannot do this without setting a fixed height?

you can use flex, i have only just read up on it but this seams to work

 

http://jsfiddle.net/KjGZw/

What you can do is make your parent div's position relative, the child div's positions absolute and give them values of top:0 and bottom:0

What you can do is make your parent div's position relative, the child div's positions absolute and give them values of top:0 and bottom:0

 

I did think of this but in was not sure how well this would work with bootstrap

I did think of this but in was not sure how well this would work with bootstrap

 

If you're using Bootstrap you can change the child div's positions at each breakpoint to suit the design

you can use flex, i have only just read up on it but this seams to work

 

http://jsfiddle.net/KjGZw/

 

Will there be cross browser compatibility issues if I use flexbox?

 

Edit: Simply applying display: flex; to the parent seems to be enough. But I'm worried about browser support.

Edited March 10, 201412 yr by Beasts

Im not to sure either, i have checked in chrome, FF 27 and they worked but not on ie 10

Failing the absolute positioning you can always use jQuery to get the height of the tallest of the 3 elements and then give each element that height.

 

This can be done by giving each of the elements a matching classname such as 'match-height' Then you can target them in a jQuery each loop, grab all the heights, save the largest one into a variable, then set the height of them all to match this.

 

E.g.

var highest = 0,
    columns = $('.match-height');
columns.each(function(){
   var currColumnHeight = $(this).outerHeight();
   if (currColumnHeight > highest) {
      highest = currColumnHeight;
   }
});
columns.css('height', highest);

 

 

Flexbox is gonna be great but won't work in older versions of IE so for now I wouldn't say it's a viable solution without some kind of IE fallback.

Edited March 10, 201412 yr by rbrtsmith

You could use display table, display table-cell and a min-height of 100%.

Here's an example, you can add as many list items as you like in the 3rd div and the previous divs will expand accordingly.

Ignore the JS, it's just to add to the list, the divs expand by themselves.

The table cell idea works really well in the right cases - I use it a lot, especially for vertically aligning content, however if you change the divs in the bootstrap grid to table cells then the grid system will break and require extensive modification to get working.

 

That's got me thinking though, obviously html tables for layout are semantically wrong. But using css to change the display property of a div to a table is totally fine. In some cases a table based grid system could work well where we want equal height columns, or content to always be centered vertically no matter what the height of it is. What are your thoughts?

Edited March 11, 201412 yr by rbrtsmith

That's what display table is for, I wouldn't use it site wide but for certain sections it's fine if it achieves its purpose.

I'm not a Bootstrap user so I'm not familiar with its finer points, but if it's not having the desired effect, then don't use it on that section. Surely, if the section is 100% wide (12 columns) then clear: both any previous floats and only display table-cell the divs in that section, it wouldn't break the rest of the grid?

Should work fine the way you described it

In case display table breaks the bootstrap grid (I'm not to familiar with bootstrap) here's a tutorial I've made with a JavaScrtpt solution: Same method as rbrtsmith posted but without jQuery:

<style>

h1,h2,h3,h4,h5,h6{ margin:0}

.col-md-12{ border:1px solid #9c0; width:950px; margin:0 auto}

.row2{ height:300px; background:#9cf;}

.register{ float:left; width:33%; min-height:300px; background:#9c0;}

.col-md-4{}

.adspace{ float:left; width:33%; min-height:300px; margin-left:4px; background:#c00;}

.market{ float:left; width:33%; min-height:300px; margin-left:4px; background:#efefef;}

.market-heading{}

.market-list{}

</style>

<section class="col-md-12">

<div class="row2">

<div class="register col-md-4">

<h4 class="register-heading">Get registered with us</h4>

<form action="" method="post">

</form>

</div>

<div class="adspace col-md-4"></div>

<div class="market col-md-4">

<h4 class="market-heading">Marketplace</h4>

<ul class="market-list">

</ul>

</div>

</div>

</section>

Simple and Quick Solution

Use "min-height" with the CSS as i have shown you in the snapshot attached.

It will work without fail.

Simple and Quick Solution

Use "min-height" with the CSS as i have shown you in the snapshot attached.

It will work without fail.

...Except if the content exceeds the 300px

<ul class="market-list">
<!--Add 20 list items here to see the problem-->
</ul>

And for the reason Nillervision showed it is far better to use js to calculate this. It will be more future proof with dynamic content.