html - CSS Single-column layout centered fixed-width 100% height w header and footer

Question

I've been recently looking into an CSS layout that will display a single centered column with fixed-width (min-width, expandable preferably) that occupied the whole height (minus header and footer).

Any suggestions for this? I have tried several approaches posted here on so but none meets my criteria. Also, I do not want to use JS for this, so it has to be pure CSS.

I'm no expert so I don't know which approach to take:

three columns with each side columns margin minus half of center column width together with a faux center column to stretch to 100% height? I somewhat dislike this idea because my side columns will have no content whatsoever

single column with margin 0 auto 0 auto to center it and top: xx px to make room for header? Then how do I stretch it to 100% height?

Any help highly appreciated.

Cheers, chross

Answer 1

Update

Simple way to do it for modern browsers (2015) using display:flex:

html, 
body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}

/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}

<header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>