Прижатый к низу страницы футер

Боюсь, большинство будет со мной не согласно, но я предпочитаю не прибегать к использованию JavaScript при верстке, особенно в подобных случаях.

Зачем решать на JS то, что можно спокойно сделать средствами css?

Пример вы дали не очень хороший, надо бы текста побольше, чтобы было видно, что при высоте страницы > высоты окна браузера футер ведет себя нормально, а не как в LiveJournal панелька LJTimes «приклеивается» к низу браузера.

вот и оно, решение.

<div class="wrap">
<div class="empty"></div>
</div>
<div class="footer">
</div>

.wrap {
height:auto !important;
height:100%;
min-height:100%;
position:relative;
}
.empty {
height:100px; /* равняется высоте футера */
}
.footer {
height:100px;
margin-top:-100px;
position:relative;
}

JavaScript да ещё при базовой верстке? у меня нет слов…

1. На хабре (да и в Рунете в общем) есть over 9000 статей по оптимизации JS и, в частности, jQuery. рекомендую почитать их. В вашем коде используется неоптимальная выборка по классу (даже без указания тега), причем многократно. Хотя можно было бы закешировать этот элемент в какой-нибудь локальной переменной нашей анонимной функции (Здравствуйте, замыкания!) и обращаться к этому элементу практически бесплатно.

2. Решения на чистом CSS (хоть и с хаками) предпочтительнее. Хотя бы тем, что работает у мифических пользователей с отключенным JS и соответствует концепции разделения разметки, оформления и функционала.
Касаемо кучи мусора: я обычно использую решение с растягиванием основного контейнера на всю высоту и оставление некоторого отступа по размеру футера, на расстояние которого он потом подтягивается отрицательным magin'ом. Это буквально пара строчек в CSS (многая часть из которых нужна не только для прижатия футера), в то время как Ваше решение занимает 20 строк JS кода.

Вы забыли упомянуть, что нужно подключать jQuery, и я бы сделал так:

$('div.middler').css('min-height',$(window).height()-$('div.top').height()-$('div.bottom').height()+'px');

По моему короче.

Вопрос на засыпку:
— Почему все советуют не использовать js для прижатия футера к низу?
Ответ:
— В случае использования js при загрузке футер «плавает» по странице.

К тому же автор не потрудился проверить, как его пример работает при низком разрешении.

Вот рабочий пример реализации прибитого к низу страницы футера без java-скрипта: ryanfait.com/resources/footer-stick-to-bottom-of-page/, демка: ryanfait.com/sticky-footer/.

Проблема подобных решений на скриптах — в использовании .ready(), которое в мало-мальски сложных страницах возникает через секунду-две после начала открывания. Футер вначале не невидимый? Отлично. На сложной странице вы увидите его «прыгание» вниз.

Решить частично можно, сделав невидимый футер. Но визуальный эффект пост-срабатывания останется (отвлекая от чтения содержания страницы). Ещё лучше решить — делая невидимой основную часть страницы до .ready(). Но тоже понятно, в каком месте минус этого решения.

Очень «экзотическое» решение вызвать функцию каждую секунду.

Мало кто понял, чего хотел автор, поэтому многие предлагают неверные варианты. Впрочем, реализация автора тоже не самая лучшая (я имею в виду поведение футера; про JS вообще молчу).

На мой взгляд, идеальный футер должен соответствовать требованиям:
1) не являться абсолютно позиционированным (то есть не преследовать посетителя), а вместо этого просто располагаться в конце страницы
2) в то же время, если страница будет слишком короткой, футер не должен оказаться в середине окна, а должен прикрепиться в нижнюю ее часть
3) футер должен быть резиновым, то есть по ширине футер должен влезать при ширине окна 100x100, а высота футера должна соответствовать высоте контента (как известно, уменьшении ширины блока с текстом увеличит его высоту из-за увеличения кол-ва строк).
4) нужно воздержаться от JS и от нарушения семантики HTML

Еще ни один из предложенных вариантов не соответствует таким, вполне адекватным, кстати, требованиям. У автора только первые 2 пункта в норме. В самых лучших вариантах 3-й пункт не соблюдался.

Awjeez! Какой отвратительный способ. Заменить CSS JS-м может только очень плохой верстальщик. Либо очень ленивый.

А почему нельзя использовать «position:fixed»?

после слов «предлагаю простое решение на базе JavaScript...» читать расхотелось