100% высота между верхним и нижним колонтитулом

FIDDLE: http://jsfiddle.net/3R6TZ/2/

Выход скрипта: http://fiddle.jshell.net/3R6TZ/2/show/

CSS

html, body {
    height: 100%;
    margin:0;
}
body {
    background:yellow; 
}
#wrapper {
    position: relative;
    min-height: 100%;
    vertical-align:bottom;
    margin:0 auto;
    height:100%;
}
#header {
    width: 100%;
    height: 150px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#content {
    background:pink;
    width:400px;
    margin:0 auto -30px;
    min-height:100%;
    height:auto !important;
    height:100%;
}
#content-spacer-top {
    height:150px;
}
#content-spacer-bottom {
    height:30px;
}
#divFooter {
    width:100%;
    height: 30px;
    background:blue;
}

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div id="content-spacer-top"></div>
        <div id="content-inner">
            **Content Goes Here**
        </div>
        <div id="content-spacer-bottom"></div>
    </div>
    <div id="divFooter">Footer</div>
</div>

UPDATE

#content-spacer-top и #content-spacer-bottom используются для заполнения #content div без использования отступов или полей, которые увеличивают размер коробки за 100% высотой, вызывающей проблемы.

В CSS3 существует свойство box-sizing (подробнее здесь), который может исправить эту проблему, но я предполагаю, что вы 't хочу зависеть от особенностей CSS3.

ИЗМЕНИТЬ

Добавлено исправление и протестировано до IE7

ОБНОВЛЕНИЕ 2

Альтернативный метод с использованием :before и :after псевдоэлементов вместо разделителей div: http://jsfiddle.net/gBr58/1/

Не работает в IE7 или 6, но для работы в IE8 должен быть объявлен <!DOCTYPE> (согласно w3schools.com), но HTML хороший и чистый

ОБНОВЛЕНИЕ 3 (Извините за так много обновлений)

Обновлено, чтобы работать до IE6. Обычно я не беспокоюсь о том, что моя компания не поддерживает IE6, но это было легко исправить...

Я думаю, вам нужно положение: зафиксировано на нижнем колонтитуле:

footer {
    width: 100%;
    height: 30px;
    position:fixed;
    bottom:0;
}