html5 layout,html - HTML5/CSS Full Height Layout - Stack Overflow

Ok, this is my basic website structure:

• ...
• ...
• ...

And here is my CSS basics:

html

{

font-size: 100%;

height: 100%;

line-height: 1.4;

overflow-y: scroll;

}

body

{

background: #EEE url("../images/background.png") repeat-y center center fixed;

color: #333;

height: 100%;

font: 1em 'Lato-Regular';

margin: 0;

padding: 0;

}

#wrapper

{

height: 100%;

margin: 0 auto;

width: 960px;

}

#content

{

min-height: 460px;

height: auto !important;

height: 460px;

margin: 20px 0;

}

This is what I would like to achieve (without using javascript hacks, preferably):

Header and footer height are determined by their content size.

div#content should have a minimum height of X pixels, but otherwise expand as much as it wants to include the content of the page.

div#wrapper should stretch to fill the whole viewport height with the div#content being the flexible part that stretch to fill.

I'm trying to target as many browsers as possible but I'm not really into full cross-browser compatibility. Let's old browsers die.

I'm getting a weird result:

As you can see, the wrapper is not stretching to fill the browser viewport and, by consequence, the footer (the black bar on the bottom) is floating in the middle of the page.

Can you help me please?