Добрый день! Помогите пожалуйста кто может, я ещё далеко не опытный верстальщик и поэтому даже 2 часа мучений не дали желаемого результата.
Есть такая html:


и вот такой css:
[CSS]
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#page-wrap {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#page {
width: 100%;
min-width: 900px;
height: 100%;
}

#body {
width: 100%;
height: auto;
min-height: 100%;
margin: 0;
padding: 0;
}

#header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
background-color: #00ff00;
}

#content {
width: 90%;
margin: 0;
padding: 0 0 40px; /* отступ снизу на высоту футера */
background-color: #03F;
margin:0 auto;
height: 100%;
}

#footer {
width: 100%;
height: 40px;
margin: -40px 0 0; /* отрицательный отступ сверху на высоту футера */
padding: 0;
background-color: #ff0000;
}
[/CSS]

Вся проблема в том, что когда content ничем не заполнен, то синий фон не растягивается по высоте на всё свободное пространство. Убил уже кучу времени, переставляю height то потомку, то родителю, но всё ровно всё криво получается, либо не получается вообще. Желательно всё это смастерить на css. В крайнем случае уже js или jquery...