Четверг
28-03-2024
13:04
Главная страница
Каталог статей
Информист Приветствую Вас Гость | RSS
Регистрация
Вход
Меню сайта

Категории каталога
YUI - Yahoo! User Interface [1]
Решение проблем, связанных с библиотекой web-интерфейса от Yahho
Web интерфейсы [18]
советы по оформлению web страниц
Протоколы [1]
MVC Visual Studio [1]

Наш опрос
Что Вы веберете
Всего ответов: 230

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

Начало » Статьи » Web » Web интерфейсы

Как прижать footer к низу страницы?
В этой статье я продемонстрирую один из способов как прижать footer к низу страницы.
Существует много способов это сделать, но большинство из них используют либо дополнительные хаки, либо дополнительное, не нужное количество html тегов. Этот метод для размещения footer внизу страницы имеет ряд преймуществ над другими методами. Во-первых, используется всего лишь 15 строк css и минимальное количество html тегов. Во-вторых, css код полностью валидный и корректно работает IE5++, Firefox, Safari, Opera.

Как использовать этот метод

Так как этот метод, чтобы прижать footer, использует минимальное количество кода, то с внедрением его в Ваши страницы не должно возникнуть никаких проблем.
  1. * {
  2. margin:0;
  3. }
  4. html, body {
  5. height:100%;
  6. }
  7. .wrapper {
  8. min-height:100%;
  9. height:auto  !important;
  10. height:100%;
  11. margin:0 auto -4em;
  12. }
  13. .footer, .push {
  14. height:4em;
  15. }
  1. <div class="wrapper">
  2. <p>Контент</p>
  3. <div class="push"></div>
  4. </div>
  5. <div class="footer">
  6. <p>Текст в футере</p>
  7. </div>

Что заставляет footer прижиматься к низу страницы?

Не смотря на то, что метод выглядит очень просто, я думаю, нужно немного разьяснить принцип его работы.
  1. Высота равная 100% для контейнеров html и body заставляет вашу страницу использовать всю доступную высоту окна браузера.
  2. Для контейнера с классом .wrapper указывается минимальная ширина равная 100%. О том, как это сделать кроссбраузерно, написано в статье: Кроссбраузерная минимальная высота(min-height)
  3. А теперь и начинается вся магия этого метода. Вы наверно заметили, что у контейнера .wrapper также указан отрицательный нижний отступ равный 4em. 4em - это высота футера. А у контейнера .push высота указана тоже 4em. Пустой контейнер служит для резервирования места для футера. Ну и сам контейнер .footer располагается в этом зарезервированом месте.
Вот и все. Все просто и понятно.

Источник: http://dimox.name/press_footer_bottom_with_css/
Категория: Web интерфейсы | Добавил: Judge (23-08-2009) | Автор: Dimox
Просмотров: 2553 | Рейтинг: 5.0 |

Всего комментариев: 0
Имя *:
Email *:
Код *:
Форма входа

Поиск по каталогу
Яндекс


Поиск по Информисту

Наша кнопка


Друзья сайта

Статистика


Copyright MyCorp © 2006Сайт создан в системе uCoz