100% height css

Question

I have 3 divs side by side that are nested with a container div. Each div will have different content on various pages, so I need each of the nested divs to stretch to the height of the div with the most content. I've tried using 'height: 100%' and 'height: auto' but neither seem to work. Can anybody help me out or point me in the right direction please. My html is:

<div id="container">
  <div id="column1"></div>
  <div id="column2"></div>
  <div id="column3"></div>
</div>

Many thanks in advance.

possible duplicate of [CSS - Equal Height Columns?](http://stackoverflow.com/questions/2114757/css-equal-height-columns) - This question is asked far too often still. Any attempt at searching would have shown you results all over the internet and SO. I just voted to close a similar question yesterday. — Rob, Jan 19 '12 at 14:04
possible duplicate of [On a two-column page, how can I grow the left div to the same height of the right div using CSS or Javascript?](http://stackoverflow.com/q/35699/), [3 and 2 column full screen (width & height) layouts (CSS)](http://stackoverflow.com/q/574317/) — outis, Jun 15 '12 at 17:37

score 2 · Answer 1 · answered Jan 19 '12 at 12:52

2

Use display: table-cell on all 3 inner divs:

#container div { display: table-cell; }

Here's a Working Example.

answered Jan 19 '12 at 12:52

Madara's Ghost

172,118
50
264
308

score 2 · Answer 2 · edited Jan 19 '12 at 15:19

While Truth's answer is the best, certain browsers (the usual suspects) don't implement table-cell correctly.

A works-across-all browsers solutions is to assign an overly large amount of vertical padding and inverse margin. For example:

<div class="container">
    <div class="column" style="background: #cc0000;">blah</div>
    <div class="column" style="background: #00cc00;">blah<br />blah<br />blah</div>
    <div class="column" style="background: #0000cc;">blah<br />blah</div>
</div>

And CSS:

.container {
    width: 300px;
    height: auto;
    overflow: auto;
}

.container div.column {
    float: left;
    width: 100px;
    height: auto;
    padding: 0 0 1000px 0;
    margin: 0 0 -1000px 0;
}

score 0 · Answer 3 · answered Jan 19 '12 at 13:06

0

Can you use jQuery?

If yes try: http://jsfiddle.net/Rnf82/2/

The problem with {display: table-cell;} is that it's not supported by older versions of IE

answered Jan 19 '12 at 13:06

giker

4,165
1
18
10

100% height css

3 Answers3