HTML-Вёрстка: как правильно растянуть DIV по высоте при малом наполнении страницы?

Question

[rook_lem]

Всем привет!

Начальные условия:
Страница с обёрткой (layout) и вложенными в неё блоками (header, content, footer).
Layout имеет фиксированную ширину и выравнен по центру страницы (margin: 0 auto;). Блоки header и footer не имеют фиксированной высоты.

Проблема:
Если блок content ничем не наполнен (height стремится к 0px), то после блока footer образуется пустота, которая нарушает весь дизайн.

Задача:
Отображение считается нормальным, если content наполнен и имеет высоту больше либо равную window.clientHight - header.hight - footer.hight. Желательно без использования JavaScript реализовать вёрстку, которая при любой высоте блока content "прижимала" бы footer к низу страницы. Интересно правильное, общепринятое решение этой проблемы. Без костылей.

Заранее спасибо!

Answer 1

[Константин Величко]

ryanfait.com/sticky-footer
Без js, просто, кроссбраузерно. Работает даже на ie6

Тоже но для html5 ryanfait.com/html5-sticky-footer

Comments

[rook_lem]

@Zoxon в сущности, это то же самое, на что ссылался @CoolWolf - метод подходит для фиксированного footer'а. Но видимо, более универсальных реализация никто не придумал.

Answer 2

[Роман Мисюра]

@CoolWolf, почему без js прижать не получиться?
jsfiddle.net/wJQ43 - можете тут посмотреть как сделано. Т.е. футер полюбому прижат к низу экрана. Да и все нормально тогда будет видно.

Comments

[Юрий Горин]

@MindMinimal ну так там же футер и хедер с фиксированной высотой. А если ее не фиксировать, то как вы без js сделаете?

[Роман Мисюра]

@CoolWolf в задаче не указано, да и футеры мало меняют люди.

[Юрий Горин]

@MindMinimal цитирую текст задачи: "Блоки header и footer не имеют фиксированной высоты."