long content here

назад далее

Прижать footer к низу (как это делается в Merry Wizard)

Три дня не спал, но решил задачку с footer-ом.
Оказалось не просто, а очень просто, особенно для тех, кто умеет писать под FireFox. Без position: absolute, html, body { height: 100% }, всяких overflow, IE-хаков, javascript и прочей чепухи.
Во-первых, javascript не помогает, потому что FireFox не соблюдает высоту div-а, даже если она установлена из javascript.
Можно было подобрать атрибуты css, но мне стало влом возиться, потому что задача снова вернулась в область css.
(К тому же скроллинги на javascript всегда тормознутые, лучше бы использовать expression, а для Internet Explorer все и так работает без javascript.)
Короче, ДАРЮ РЕШЕНИЕ на память о бессонных ночах.

Стиль:

<style type="text/css"><!--
body         { border-style: none; border-width: 0px; margin: 0 }
/* FireFox only */
div          { box-sizing: border-box; -moz-box-sizing: border-box }
#wrapper { height: 100% }
html>body #wrapper { display: table; height: 0%; min-height: 100% }
-->
</style>

Страница:

<!-- wrapper (FOOTER HEIGHT HERE) -->
<div id="wrapper" style="position: relative; width: 100%; margin-bottom: 80px">
long or short content here
</div>
<!-- end wrapper -->

<!-- footer (FOOTER HEIGHT HERE) -->
<div id="footer" style="position: relative; margin-top: -80px; top: 0px; height: 80px; width: 100%">
footer here
</div>
<!-- end footer -->

Комментарии:

1. Можно не использовать #wrapper { height: 100% } , а написать height: 100% прямо в div-е. (Работает, но выглядит подозрительно.)
2. Можно использовать конструкцию #wrapper, q\:* { height: 100% } если html>body #wrapper { написан выше.
3. И, кажется, div { box-sizing: border-box; -moz-box-sizing: border-box } не нужен. Проверьте сами, если интересно.

Ладно, в борьбе за валидность обойдемся без html>body. В стиле только:

#wrapper { height: 100%; display: table; min-height: 100% }

и в самом div-е нижний margin 0px:

<div id="wrapper" style="position: relative; width: 100%; margin-bottom: 0px">

Подозрительно как-то, но вроде работает. Пример здесь. (Тут два примера, закомментированный сделан с помощью _height)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

end line

footer here