По горизонтали и вертикали центр div в середине страницы с верхним и нижним колонтитулом, прикрепленным к верху и низу страницы

Question

Я пытаюсь создать страницу с фиксированным верхним и нижним колонтитулами. Верхний колонтитул находится вверху экрана (ширина 100%), а нижний колонтитул внизу (ширина 100%). Я хочу центрировать div с содержимым переменной высоты в пространстве между верхним и нижним колонтитулом. В приведенном ниже jsfiddle он работает, если содержимое короче пробела, но если содержимое становится слишком длинным, оно проходит за нижний колонтитул и поверх заголовка. Это также не работает вообще в IE (удивление, удивление).

Пример: http://jsfiddle.net/VrfAU/4/

Редактировать: Я сделал несколько изображений, чтобы попытаться сделать это более ясным.

Малый контент

Большое содержание

Answer 1

В итоге я начал все сначала и попробовал другой подход.Рабочее решение находится в новом jsfiddle ниже.Идея заключалась в том, чтобы отделить верхний и нижний колонтитулы от области содержимого, чтобы они располагались сверху и снизу.Тогда стало намного проще центрировать область содержимого в пространстве между ними (с некоторыми хаки для более старых версий IE).

http://jsfiddle.net/UYpnC/5/

Answer 2

Попробуйте что-то вроде этого:

.main { min-height: 500px }

http://jsfiddle.net/VrfAU/8/

Answer 3

Я использовал z-index свойства css, который управляет порядком стека, чтобы исправить это: я также использовал положение: исправлено, чтобы исправить верхний и нижний колонтитулы:

Я положил

        #header {
background: black;
width: 100%;
height: 66px;
position:fixed;
overflow: hidden;
z-index: 20;}


.main_wrap {
    display: table;
    width: 100%;
    height: 100%;
    margin-top: -88px;
    vertical-align: middle;
    position: relative;
    z-index: -1;
}
#footer {
background: black;
width: 100%;
position: relative;
font-size: 85%;
color: #d0d6e0;
margin-top: -22px;
position: fixed;}