Прижимать футер к низу страницы я считаю хорошим тоном. Просмотрев множество решений, я обнаружил что все они основаны на каких-либо хаках и требуют вставить в код кучу мусора. Предлагаю простое решение на базе JavaScript, которое не потребует никаких дополнительных элементов и работает стабильно во всех браузерах.
Все что нужно — подключить специальный скрипт и назначить элементу, который будет растягиваться, класс ndra-container. Готово!
Посмотреть пример
Страница с прижатым подвалом должна выглядеть приблизительно так:
Скрипт растянет блок с контентом так, чтобы футер уперся в низ страницы. Скрипт проверяет высоту блока каждую секунду и оперативно реагирует на изменение размеров окна. Работает во всех браузерах. Пользуйтесь :) Вот код самого скрипта:
Все что нужно — подключить специальный скрипт и назначить элементу, который будет растягиваться, класс ndra-container. Готово!
Посмотреть пример
Страница с прижатым подвалом должна выглядеть приблизительно так:
- <html>
- <body>
- <div>Шапка</div>
- <div class='ndra-container' >Контент</div>
- <div>Подвал</div>
- </body>
- </html>
* This source code was highlighted with Source Code Highlighter.Скрипт растянет блок с контентом так, чтобы футер уперся в низ страницы. Скрипт проверяет высоту блока каждую секунду и оперативно реагирует на изменение размеров окна. Работает во всех браузерах. Пользуйтесь :) Вот код самого скрипта:
- $(function() {
-
- $("body").css({padding:0,margin:0});
- var f = function() {
- $(".ndra-container").css({position:"relative"});
- var h1 = $("body").height();
- var h2 = $(window).height();
- var d = h2 - h1;
- var h = $(".ndra-container").height() + d;
- var ruler = $("<div>").appendTo(".ndra-container");
- h = Math.max(ruler.position().top,h);
- ruler.remove();
- $(".ndra-container").height(h);
- };
- setInterval(f,1000);
- $(window).resize(f);
- f();
-
- });
* This source code was highlighted with Source Code Highlighter.
