Важно! Создание прибыльных веб сайтов и поисковое продвижение сайтов в Москве: веб-компания StudioForYou!
Стили CSS - Прицепляем Футер Сайта к Нижней Границе Браузера
Опубликовано Март 7th, 2008 в CSS |
Автор: Крис Койер
Перевод: Всеволод Козлов
Футеры - отличное место для размещения информации об авторских правах, ссылки на страницу контактов и на основные разделы сайта. Пользователи уже привыкли обращаться за этой информацией к футеру сайта.
Но нередко бывает так, что футер находится не там, где должен. Случается это по разным причинам, но важен сам факт того, что случается.
Моей целью является исправление этого недоразумения. Как я добьюсь этого, читайте дальше!
Перед тем, как я предоставлю Вам фрагменты используемых мной для решения данной проблемы кодов, я хочу сказать Вам, что мы получим в итоге.
В итоге мы получим футер, прицепленный к нижней границе браузера!
HTML-код:
<div class="wrapper">
<div class="header">
<h1>Заголовок</h1>
</div>
<h2>Подзаголовок</h2>
<p>Контент</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Копирайты в футере</p>
</div>
CSS-код:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /* нижний margin является отрицательной величиной высоты footer */
}
.footer, .push {
height: 4em; /* .push должен быть той же высоты, что и .footer */
}
За идею спасибо: Райану Фэйту
Оригинал статьи: A Bulletproof Sticky Footer, Woohoo!
Популярность публикации: 14%
Похожие статьи по блогингу и веб-местерингу:
- Стили CSS - Затеняем нижнюю видимую часть веб-страниц с помощью зафиксированного изображения
- Ускорение загрузки Вашего сайта: Оптимизация CSS-файлов
- Оптимизируем WordPress темы оформления: 13 фрагментов php-кода, подлежащие удалению
- Древообразная таблица с помощью HTML и CSS
- Одна из наиболее распространенных ошибок CSS-верстальщиков. Пример качественной организации CSS-стилей
22 комментария(-ев)
А примеры реализованные по этому методу есть?
очень хотелось бы посмотреть.
Спасибо.
Подорожник, ссылка на пример есть после статьи в поле “За идею спасибо”
а зачем нужен push?
ясно, спасибо.
“Но нередко бывает так, что футер находится не там, где должен.”
не встречал таких))))) покажите на примере….)))
… оригинальность есть в такой идее.
Ничего оригинального….
Оригинал тут:
http://ryanfait.com/sticky-footer/
Там же и пример и файлы для загрузки (это для ленивых)
[…] 4. На w3school.ru появилась небольшая по объёму, но ёмкая по содержанию заметка о том, как CSS-методами прикрепить футер сайта к нижней границ
<div class="push"></div>Нужно только для Safari и все равно работает не совсем корректно. Уж лучше прописать отдельный хак для него.
В остальных случаях можно обойтись
.footer{
margin-top:4em;
height: 4em;
}
Если у .footer, .push будет background-color отличный от .wrapper то на страницах с height < 100% будет виден слой push и его можно убрать сделав, например, так (это не единственный способ)
поставить у push style=”display:none;”
[…] Прикрепляем футер к нижней границе браузераПрибитый к низу страницы футер, вторая по популярности тема в контексте CSS после выпадающего меню. После этой реализации обсуждать уже нечего. […]
К нижней границе области отображения или страницы?
Как по мне данный вариант не самый лучший. Более подходящий это вариант с абсолютным позиционированием, или вариант со смещением контента вверх
[…] Прикрепляем футер к нижней границе браузера Прибитый к низу страницы футер, вторая по популярности тема в контексте CSS после выпадающего меню. После этой реализации обсуждать уже нечего. […]
[…] Еще один способ прибивания футера. […]
FF не хочет клеить… все решилось разделением этого дела таблицей, что считаю самым надежным методом…
Вот способ, написанный лично мной… тестил на FF, IE, Opera… Не мешает дальнейшему навёрстыванию…
test
body, html{
margin:0;
padding:0;
height:100%;
width:100%;
}
.content{
float:left;
width:100%;
}
.footer{
height:100px;
clear:both;
}
.bg{
float:left;
height:100%;
width:100%;
margin:0 0 -100px -100%;
overflow:hidden;
}
.block{
width:500px;
margin:0 auto;
}
Тестовый контент… Не обязательный блок… Имеет ширину 500px, центрирование.
Footer
ехх… чтож символы не экранируем?!
Стили вы видели…
Вот HTML
[div class=”bg”][div]
[div class=”content”]
[div class=”block”]Тестовый контент… Не обязательный блок… Имеет ширину 500px, центрирование.[/div]
[/div]
[div class=”footer”]Footer[/div]
последний код не работает в Опера 10
пришлось добавить onload в тело с bg.height = 100%, т.к. опера упорно меняет в конце загрузки его на auto (=0)
Товарищи! Очень здоровская реализация. Только помогите впаять это в *.aspx…
Структура такая:
Untitled Page
Всё бы хорошо, но не желает тянуться на всю страницу никак! ((
Мдя… структура не отправилась(((