Растяжение вертикального макета с верхним и нижним колонтитулами статической высоты в простом HTML / CSS

Question

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

header
------

center


------
footer

Спасибо за помощь

ps. Абсолютное позиционирование для меня не вариант.

Answer 1

Я считаю, что это то, что вы ищете
jsFiddle

Используйте поля, чтобы установить margin-top и margin-bottom середины <div> на -50px или любую соответствующую высоту желаемого верхнего и нижнего колонтитулов.

В качестве альтернативы используйте этот (относительно хакерский) метод, если вы хотите добавить контент в среднюю часть страницы. jsFiddle

Answer 2

ответ jacktheripper работает, но я не советую!Кросс-браузерная совместимость может быть не просто.Подумайте, посмотрите на «Липкий нижний колонтитул» Райана Фейта.Его можно найти здесь .Есть еще один, а именно 'CSS Sticky Footer' , но я им не пользовался.Должен работать относительно одинаково, и вам не нужен «push div».Обязательно прочитайте «Известные проблемы» на этой странице!