CSS - Equal Height Columns?

Question

In CSS, I can do something like this:

But I\'ve no idea how to change that to something like:

---

Is this possible with CSS?

Answer 1

Responsive answer:

CSS flexbox is cute, but cutting out IE9 users today is a little insane. On our properties as of Aug 1 2015:

3% IE9
2% IE8

Cutting those out is showing 5% a broken page? Crazy.

Using a media query the way Bootstrap does goes back to IE8 as does display: table/table-cell. So:

http://jsfiddle.net/b9chris/bu6Lejw6/

HTML

    
Col 1
Col 1
    
Col 2

CSS

body {
    font: 10pt Verdana;
    padding: 0;
    margin: 0;
}

div.col {
    padding: 10px;
}

div.col1 {
    background: #8ff;
}
div.col2 {
    background: #8f8;
}

@media (min-width: 400px) {
    div.box {
        display: table;
        width: 100%;
    }
    div.col {
        display: table-cell;
        width: 50%;
    }
}

I used 400px as the switch between columns and a vertical layout in this case, because jsfiddle panes trend pretty small. Mess with the size of that window and you'll see the columns nicely rearrange themselves, including stretching to full height when they need to be columns so their background colors don't get cut off part-way down the page. No crazy padding/margin hacks that crash into later tags on the page, and no tossing of 5% of your visitors to the wolves.