Есть несколько способов реализовать футер, прилипающий к низу страницы (Sticky Footer), используя свойства CSS. Но многие из них прибегают к громоздким и неудобным хакам, или требуют много дополнительного HTML кода. Описанный здесь метод использует всего 15 строк CCS кода и почти не требует дополнительной HTML разметки. Также он отличается тем, что построен на валидном CSS коде. И, само собой, работает во всех популярных браузерах (IE5 и старше, FireFox, Safari, Opera и Chrome).
Прежде всего, вы можете посмотреть, как это работает. Здесь находится пример реализации описанного метода. Убедитесь в том, что он валиден и является кроссбраузерным.
Добавьте следующий CSS код в вашу таблицу стаилей. При этом обратите внимание, что отрицательное значение margin-bottom равно высоте .footer и .push. Это отрицательное значение должно быть равно полной высоте footer, включая какие-либо отступы или border последнего. Если не следовать этому принципу, то появится вертикальная полоса прокрутки. Она появится даже в том случае, если фактически контент будет помещаться на странице.
CSS код:
HTML код представлен ниже. Весь контент должен содержаться только внутри.wrapper и .footer. Внутри .push также ничего не должно быть, так как этот слой является скрытым элементом, прижимающим футер. Разумеется, все это не касаетс я элементов с абсолютным позиционированием. Они могут находиться где-угодно.
HTML код
Учитывая то, что под IE6 верстают все меньше, можно привести селектор .wrapper к такому виду:
Метод останется рабочим для всех браузеров, кроме IE6 и меньше. Конечно, две строчки кода погоды не делают, но для педантов они могут показаться лишними.
На основе статьи CSS Sticky Footer
Мурашов Олег
Программист и фрилансер из Санкт-Петербурга. Помимо веб-программирования, занимаюсь разработкой мобильных приложений для платформы Android. Играю на бас гитаре. Занимаюсь спортом.
Добавить комментарий
Ваш e-mail не будет опубликован. Обязательные поля помечены *
Имя *
E-mail *
Сайт
Комментарий
http://omurashov.ru/css-html/css-sticky-footer/
- Автоматическое монтирование fstab и systemd - 24.02.2021
- Как в Linux подключить новый диск, разметить и отформатировать разделы - 24.02.2021
- Как сменить режим работы PHP - 24.02.2021