CSS column layout with last elements' heights set equally

Question

I have a 3-column layout which I'm trying to show you with this paint illustration. I want the last divs of each column to take up the remaining space (blue).

The overall height of this layout is not fix, nor the number of divs. Some of the divs will have fix dimensions, others don't.

Is there a pure CSS solution for this?

Answer 1

The cleanest way to achieve this is to use CSS flexible boxes:

<div class="col1"> ... </div>    
<div class="col2"> ... </div>   
<div class="col3"> ... </div>

CSS:

body{   
  display: -ms-flexbox;     /* ie 10 (older but working flex implementation) */     
  display: -webkit-flexbox;
  display: flex;    
  min-height: 100vh; /* optional, forces minimum height to 100% of viewport */
  margin: 0;
  padding:0;        
}

.col1, .col3{
  width: 25%;
}

.col2 {
  width: 50%;    
}

(demo)

The markup is simple, CSS is easy to understand, no "hacks". The only disadvantage right now is the poor browser support (IE 10+). I wouldn't consider it a big one, because you can work around this in IE 9- by using javascript.

Check out "Solved by flexbox" for other uses cases.

---

Another good solution that I have been using for years is the "The Perfect 3 Column Liquid Layout". The CSS is clean, but a little harder to understand and HTML is a little bulky because it requires wrapper elements for each column. If you need IE 6+ support without resorting to javascript, this is probably the 2nd best choice.

---

There are other ways to do this:

• Table layout (display:table and related properties)
• Background images on the body (for solid colors CSS gradients work too)

They are explained in this article (ignore the flex box one, because it uses the old implementation with some unnecessary 99999px margin hack).

But these introduce other limitations that can outweigh the ones from the first two methods. For example, Firefox not positioning absolute elements relative to the table cell. With backgrounds this kind of positioning is not possible at all, because the columns don't have real 100% height