Comments 43
Боюсь, большинство будет со мной не согласно, но я предпочитаю не прибегать к использованию JavaScript при верстке, особенно в подобных случаях.
+41
Согласен, в верстке этот подход мало применим.
+1
Случаи бывают разные, иногда это полезно. Но явно не в прижатии футера.
+3
Поддерживаю.
Я сам долго искал хороший способ прижать футер к низу страницы, в итоге пришлось дорабатывать самому, но работает отлично. Хотя, лишних элементов в коде прибавилось.
Я сам долго искал хороший способ прижать футер к низу страницы, в итоге пришлось дорабатывать самому, но работает отлично. Хотя, лишних элементов в коде прибавилось.
0
Именно. Тем более 90% нормальных людей используют как правило либо метод Раяна Фэйта [1], либо его модификацию [2].
[1]: ryanfait.com/resources/footer-stick-to-bottom-of-page/
[2]: www.cssstickyfooter.com/
[1]: ryanfait.com/resources/footer-stick-to-bottom-of-page/
[2]: www.cssstickyfooter.com/
+3
Зачем решать на JS то, что можно спокойно сделать средствами css?
+10
Пример вы дали не очень хороший, надо бы текста побольше, чтобы было видно, что при высоте страницы > высоты окна браузера футер ведет себя нормально, а не как в LiveJournal панелька LJTimes «приклеивается» к низу браузера.
+1
вот и оно, решение.
<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;
}
+3
А может убрать div.empty и прописать div.wrap'у padding-bottom?
0
у wrap высота 100%
0
Не, нельзя.
Лучше использовать empty как контейнер для контента и прописать нижний паддинг(высоту конечно убрать)
Лучше использовать empty как контейнер для контента и прописать нижний паддинг(высоту конечно убрать)
0
чем вас не устраивает использовать слой wrap для контента? Он для него и предназначен
0
Не люблю лишние пустые элементы. Если уж нужен дополнительный элемент, то, на мой взгляд, лучше в него засунуть контент и задать отступ? использовать с пользой :)
<div class=«wrap»>
<div class=«content» style=«padding-bottom: 100px;»>
some content
</div>
</div>
<div class=«wrap»>
<div class=«content» style=«padding-bottom: 100px;»>
some content
</div>
</div>
+1
боюсь от такого у вас будет припадок
www.html.it/articoli/nifty/index.html
www.html.it/articoli/nifty/index.html
0
А вот внутри wrap можно еще обертку типа .content сделать с padding-bottom
0
Никого не смутило, что пример не работает как надо?
+1
JavaScript да ещё при базовой верстке? у меня нет слов…
0
1. На хабре (да и в Рунете в общем) есть over 9000 статей по оптимизации JS и, в частности, jQuery. рекомендую почитать их. В вашем коде используется неоптимальная выборка по классу (даже без указания тега), причем многократно. Хотя можно было бы закешировать этот элемент в какой-нибудь локальной переменной нашей анонимной функции (Здравствуйте, замыкания!) и обращаться к этому элементу практически бесплатно.
2. Решения на чистом CSS (хоть и с хаками) предпочтительнее. Хотя бы тем, что работает у мифических пользователей с отключенным JS и соответствует концепции разделения разметки, оформления и функционала.
Касаемо кучи мусора: я обычно использую решение с растягиванием основного контейнера на всю высоту и оставление некоторого отступа по размеру футера, на расстояние которого он потом подтягивается отрицательным magin'ом. Это буквально пара строчек в CSS (многая часть из которых нужна не только для прижатия футера), в то время как Ваше решение занимает 20 строк JS кода.
2. Решения на чистом CSS (хоть и с хаками) предпочтительнее. Хотя бы тем, что работает у мифических пользователей с отключенным JS и соответствует концепции разделения разметки, оформления и функционала.
Касаемо кучи мусора: я обычно использую решение с растягиванием основного контейнера на всю высоту и оставление некоторого отступа по размеру футера, на расстояние которого он потом подтягивается отрицательным magin'ом. Это буквально пара строчек в CSS (многая часть из которых нужна не только для прижатия футера), в то время как Ваше решение занимает 20 строк JS кода.
+5
Вы забыли упомянуть, что нужно подключать jQuery, и я бы сделал так:
По моему короче.
$('div.middler').css('min-height',$(window).height()-$('div.top').height()-$('div.bottom').height()+'px');
По моему короче.
0
Вопрос на засыпку:
— Почему все советуют не использовать js для прижатия футера к низу?
Ответ:
— В случае использования js при загрузке футер «плавает» по странице.
К тому же автор не потрудился проверить, как его пример работает при низком разрешении.
— Почему все советуют не использовать js для прижатия футера к низу?
Ответ:
— В случае использования js при загрузке футер «плавает» по странице.
К тому же автор не потрудился проверить, как его пример работает при низком разрешении.
0
В маленьком размере окна как раз работает хорошо. Ведь автор, очевидно, хотел, чтобы футер не оказался в середине окна, если страница слишком короткая. Если страница длиннее, чем окно, то футер должен работать как обычно.
Если бы задача была в том, чтобы футер всегда был прикреплен к низу, то всё было бы намного проще, но зануднее для пользователя.
Если бы задача была в том, чтобы футер всегда был прикреплен к низу, то всё было бы намного проще, но зануднее для пользователя.
0
У меня это выглядит вот так:
img-fotki.yandex.ru/get/5803/vita-zhelt.0/0_4f77b_e703266a_XL.jpg
img-fotki.yandex.ru/get/5803/vita-zhelt.0/0_4f77b_e703266a_XL.jpg
0
Вот рабочий пример реализации прибитого к низу страницы футера без java-скрипта: ryanfait.com/resources/footer-stick-to-bottom-of-page/, демка: ryanfait.com/sticky-footer/.
0
Проблема подобных решений на скриптах — в использовании .ready(), которое в мало-мальски сложных страницах возникает через секунду-две после начала открывания. Футер вначале не невидимый? Отлично. На сложной странице вы увидите его «прыгание» вниз.
Решить частично можно, сделав невидимый футер. Но визуальный эффект пост-срабатывания останется (отвлекая от чтения содержания страницы). Ещё лучше решить — делая невидимой основную часть страницы до .ready(). Но тоже понятно, в каком месте минус этого решения.
Решить частично можно, сделав невидимый футер. Но визуальный эффект пост-срабатывания останется (отвлекая от чтения содержания страницы). Ещё лучше решить — делая невидимой основную часть страницы до .ready(). Но тоже понятно, в каком месте минус этого решения.
+1
UFO just landed and posted this here
Очень «экзотическое» решение вызвать функцию каждую секунду.
+2
Хех, использовать JS для такой простой операции — пипец.
Напишите просто:
Всё, больше ничкго не нужно для того, чтобы футер фсегда находился внизу страницы.
Напишите просто:
#footer {position:absolute; bottom:0;}
Всё, больше ничкго не нужно для того, чтобы футер фсегда находился внизу страницы.
-1
Мало кто понял, чего хотел автор, поэтому многие предлагают неверные варианты. Впрочем, реализация автора тоже не самая лучшая (я имею в виду поведение футера; про JS вообще молчу).
На мой взгляд, идеальный футер должен соответствовать требованиям:
1) не являться абсолютно позиционированным (то есть не преследовать посетителя), а вместо этого просто располагаться в конце страницы
2) в то же время, если страница будет слишком короткой, футер не должен оказаться в середине окна, а должен прикрепиться в нижнюю ее часть
3) футер должен быть резиновым, то есть по ширине футер должен влезать при ширине окна 100x100, а высота футера должна соответствовать высоте контента (как известно, уменьшении ширины блока с текстом увеличит его высоту из-за увеличения кол-ва строк).
4) нужно воздержаться от JS и от нарушения семантики HTML
Еще ни один из предложенных вариантов не соответствует таким, вполне адекватным, кстати, требованиям. У автора только первые 2 пункта в норме. В самых лучших вариантах 3-й пункт не соблюдался.
На мой взгляд, идеальный футер должен соответствовать требованиям:
1) не являться абсолютно позиционированным (то есть не преследовать посетителя), а вместо этого просто располагаться в конце страницы
2) в то же время, если страница будет слишком короткой, футер не должен оказаться в середине окна, а должен прикрепиться в нижнюю ее часть
3) футер должен быть резиновым, то есть по ширине футер должен влезать при ширине окна 100x100, а высота футера должна соответствовать высоте контента (как известно, уменьшении ширины блока с текстом увеличит его высоту из-за увеличения кол-ва строк).
4) нужно воздержаться от JS и от нарушения семантики HTML
Еще ни один из предложенных вариантов не соответствует таким, вполне адекватным, кстати, требованиям. У автора только первые 2 пункта в норме. В самых лучших вариантах 3-й пункт не соблюдался.
+2
Простите, но обычно футер должен быть ровно настолько же резиновым, насколько резинова сама страница. Если при уменьшении окна меньше #px основной контент перестает помещаться и в браузере появляется прокрутка — футер не должен продолжать сжиматься. И в адекватных css-вариантах (например в приведенном выше под номером [2]) это правило соблюдается.
0
Awjeez! Какой отвратительный способ. Заменить CSS JS-м может только очень плохой верстальщик. Либо очень ленивый.
+1
А почему нельзя использовать «position:fixed»?
0
после слов «предлагаю простое решение на базе JavaScript...» читать расхотелось
0
Sign up to leave a comment.
Прижатый к низу страницы футер