@010001101100100100107 апр 2011 в 12:34

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

2 мин

55K

Веб-разработка *

-34

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

@petruha 7 апр 2011 в 12:39

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

@Rastler 7 апр 2011 в 12:42

Согласен, в верстке этот подход мало применим.

@cramen 7 апр 2011 в 19:13

Присоединяюсь
Да и средствами css прижимается футер к низу на раз-два.

@kostos 7 апр 2011 в 12:44

Случаи бывают разные, иногда это полезно. Но явно не в прижатии футера.

@Roler 7 апр 2011 в 12:49

Поддерживаю.

Я сам долго искал хороший способ прижать футер к низу страницы, в итоге пришлось дорабатывать самому, но работает отлично. Хотя, лишних элементов в коде прибавилось.

@mixrin 7 апр 2011 в 13:09

Именно. Тем более 90% нормальных людей используют как правило либо метод Раяна Фэйта [1], либо его модификацию [2].

[1]: ryanfait.com/resources/footer-stick-to-bottom-of-page/
[2]: www.cssstickyfooter.com/

@ozoned 7 апр 2011 в 14:14

А для футера произвольной высоты? Вот-вот…

@mixrin 7 апр 2011 в 14:21

Для футера произвольный высоты я пожалуй воздержусь от js ^_^"

@Dobrii 7 апр 2011 в 12:42

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

@svfoster 7 апр 2011 в 12:42

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

@mdss 7 апр 2011 в 12:46

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

<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;

}

@barmaley_exe 7 апр 2011 в 12:47

А может убрать div.empty и прописать div.wrap'у padding-bottom?

@Dobrii 7 апр 2011 в 12:50

у wrap высота 100%

@kostos 7 апр 2011 в 12:50

Не, нельзя.
Лучше использовать empty как контейнер для контента и прописать нижний паддинг(высоту конечно убрать)

@mdss 7 апр 2011 в 12:53

чем вас не устраивает использовать слой wrap для контента? Он для него и предназначен

@kostos 7 апр 2011 в 12:59

Не люблю лишние пустые элементы. Если уж нужен дополнительный элемент, то, на мой взгляд, лучше в него засунуть контент и задать отступ? использовать с пользой :)
<div class=«wrap»>
<div class=«content» style=«padding-bottom: 100px;»>
some content
</div>
</div>

@mdss 7 апр 2011 в 15:59

боюсь от такого у вас будет припадок
www.html.it/articoli/nifty/index.html

@Dobrii 7 апр 2011 в 12:51

А вот внутри wrap можно еще обертку типа .content сделать с padding-bottom

@mdss 7 апр 2011 в 12:53

зачем? .wrap стыкуется с .footer

@Dobrii 7 апр 2011 в 12:57

Неужели я туплю?
Бессонная ночь дает о себе знать)

@AntonDiaz 7 апр 2011 в 13:52

Никого не смутило, что пример не работает как надо?

@mdss 7 апр 2011 в 16:00

я на этой основе сверстал уже не один десяток сайтов и везде все работает ;)

@mdss 7 апр 2011 в 16:02

хотя извиняюсь, забыл указать, что для body и html тоже нужно указать 100% высоту

<code>html, body {
	width:100%;
	height:100%;
}
</code>

@norfild 7 апр 2011 в 12:46

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

@asm0dey 7 апр 2011 в 19:37

Видели бы вы, какой код генерируется GWT… Наверное, вы бы возненавидели гугл.

@barmaley_exe 7 апр 2011 в 12:46

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

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

НЛО прилетело и опубликовало эту надпись здесь

@VitaZheltyakov 7 апр 2011 в 12:49

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

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

@AntonDiaz 7 апр 2011 в 13:59

В маленьком размере окна как раз работает хорошо. Ведь автор, очевидно, хотел, чтобы футер не оказался в середине окна, если страница слишком короткая. Если страница длиннее, чем окно, то футер должен работать как обычно.

Если бы задача была в том, чтобы футер всегда был прикреплен к низу, то всё было бы намного проще, но зануднее для пользователя.

@VitaZheltyakov 7 апр 2011 в 16:20

У меня это выглядит вот так:
img-fotki.yandex.ru/get/5803/vita-zhelt.0/0_4f77b_e703266a_XL.jpg

@AntonDiaz 7 апр 2011 в 18:18

Так и надо было. Просто автор плохо сформулировал задачу.

@rrromka 7 апр 2011 в 12:51

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

@spmbt 7 апр 2011 в 13:13

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

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

НЛО прилетело и опубликовало эту надпись здесь

@Melanitsky 7 апр 2011 в 16:05

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

@name 7 апр 2011 в 17:14

Хех, использовать JS для такой простой операции — пипец.

Напишите просто:
#footer {position:absolute; bottom:0;}

Всё, больше ничкго не нужно для того, чтобы футер фсегда находился внизу страницы.

@AntonDiaz 7 апр 2011 в 18:56

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

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

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

@Dlussky 7 апр 2011 в 21:46

Простите, но обычно футер должен быть ровно настолько же резиновым, насколько резинова сама страница. Если при уменьшении окна меньше #px основной контент перестает помещаться и в браузере появляется прокрутка — футер не должен продолжать сжиматься. И в адекватных css-вариантах (например в приведенном выше под номером [2]) это правило соблюдается.

@Dlussky 7 апр 2011 в 21:50

Чиорт, всего 1:40, а я уже невнимательно читаю каменты=(
Забираю свои слова обратно, понял о чем вы, действительно не соблюдается, но я лично не сталкивался с футерами, в которых бы это было актуально)
Кстати, интересно, решается ли эта задача с использованием старых, несемантишных таблиц?)