css col-3,CSS 3 col template 100% same height

That's a great question! It took me quite a while to create a graceful solution for you.

What you need is the dynamic sticky footer technique with an extra container for columns.

HTML

foo

Contents A

Contents B

Contents C

bar

CSS

/*************************

* Sticky footer hack

* Source: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

************************/

/* Stretching all container's parents to full height */

html, body {

height: 100%;

margin: 0;

padding: 0;

}

/* Setting the container to be a table with maximum width and height */

#container {

display: table;

height: 100%;

width: 100%;

}

/* All sections (container's children) should be table rows with minimal height */

.section {

display: table-row;

height: 1px;

}

/* The last-but-one section should be stretched to automatic height */

.section.expand {

height: auto;

}

/*************************

* Full height columns

************************/

/* We need one extra container, setting it to full width */

.columns-container {

display: table-cell;

height: 100%;

}

/* Creating columns */

.column {

/* The float:left won't work for Chrome for some reason, so inline-block */

display: inline-block; /* for this to work, the .column elements should have NO SPACE BETWEEN THEM */

vertical-align: top;

height: 100%;

width: 33.3333%;

}

/****************************************************************

* Just some coloring so that we're able to see height of columns

****************************************************************/

header { background-color: yellow; }

#a { background-color: pink; }

#b { background-color: lightgreen; }

#c { background-color: lightblue; }

footer { background-color: purple; }

Demo

Compact columns content: http://jsfiddle.net/hsX5q/19/

One of the column's content overflows window height: http://jsfiddle.net/hsX5q/20/

PS

You've got a wrong CSS selector in your question. The correct would be:

html > body > div-wrapper > div-left,

html > body > div-wrapper > div-separator,

html > body > div-wrapper > div-content {