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

Я пытаюсь создать макет веб-страницы с верхним/нижним колонтитулом (100% ширина, высота 145 пикселей), "основная область" между верхним/нижним колонтитулом (ширина 100%, динамическая высота) и контейнер вокруг содержимого это уникальный цвет фона (ширина 860 пикселей, динамическая высота, но всегда "флеш" на нижнем колонтитуле).

(См. пример для визуального)

Проблема, с которой я столкнулась, заключается в том, что я не могу представить, что контейнер содержимого всегда находится на одном уровне с нижним колонтитулом при минимальном содержании. Используя настройку, такую ​​как (оригинальный пример), вы получите нижний колонтитул, плавающий над контентом, если есть респектабельный/ "нормальный" объем контента или если размер окна изменяется.

И следующий CSS приводит к разрыву между содержимым и нижним колонтитулом.

html,body{
   margin:0;
   padding:0;
   height:100%;
  background:yellow;
}

.wrap{
   min-height:100%;
   position:relative;
}

header{
  background:blue;
   padding:10px;  
}

#content{
  height:100%;
  width: 400px;
  margin:0 auto;
  background:orange;
    padding:30px;
}
footer{
  background:blue;
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
}

Как я могу сделать контейнер содержимого полной высотой экрана, когда контент минимален, а нижний колонтитул "вставить" в нижнюю часть страницы, а также динамически изменять размер соответствующим образом, если есть нормальный объем содержимого (нижний колонтитул всегда находится в нижней части содержимого)?

Спасибо!

Ответы

Ответ 1

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, но это было легко исправить...

Ответ 2

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

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