Full height Column background color with Bootstrap Grid

Question

I know the chances are slim, but how would you achieve layouts like the following, where left, center and right have different background colors while using the bootstrap grid system? I guess the column layout is against the thinking of the Bootstrap grid, am I right?

Here's an online use case url.

The CSS is the standard Bootstrap grid CSS for spans etc..

I had a look on some other SO Q and A's but I wouldn't like to use things like JavaScript.. or things not supported by IE7+..

Answer 1

The solution from @Omega looks good, here's another option: http://jsfiddle.net/panchroma/u5XGL/

The important bit of the CSS here is how to get the background colours for columns with varying content height.

I've added a large padding and an equally large negative margin to each column, then wrapped the entire row in in a class with overflow hidden.

CSS

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffc;
}

.col-wrap{
overflow: hidden; 
}

You will find that it resoponds well and is also a good cross-browser solution.

Good luck!

Answer 2

Sure, just use this CSS:

html, body, .container-fluid, .row-fluid, .blue, .lightgrey {height:100%;}

http://dabblet.com/gist/5326320