Главная » Рецепты CSS » Как прижать футер сайта (подвал) к низу экрана с помощью CSS

Как прижать футер сайта (подвал) к низу экрана с помощью CSS

2014-07-02 / Вр:13:41 / просмотров: 5906

Кроме основной работы конструктора на заводе, где в мои обязанности входит черчение в «Компасе» теплообменников, я под заказ верстаю и рисую макеты сайтов. Частенько мне приходилось сталкиваться с задачей, как прижать футер сайта к низу страницы. Придумывал разные способы, пробовал даже метод научного втыка, но то, как прижимало футер к низу экрана мне не нравилось, потому что получался объемный код. Перечитал множество блогов, сайтов и остановился вот на этом коротком варианте:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Прижимаем футер к низу с помощью css</title>
    <style ENGINE="text/css">
        html, body{
            padding:0;
            margin:0;
            height:100%; /* Задаём 100% высоту для html и body */
            position:relative; /* Для браузера Оперы */
        }
        .container{
            background:#CCC; /* Чтобы был виден контейнер */
            min-height:100%; /* Задаем минимальную высоту 100% */
            _height:100%; /* Задаем высоту 100% в ИЕ6 с помощью хака */
        }
        .content{
            padding-bottom:50px; /* Задаём нижний отступ, равный или больше высоте футера */
        }
        .footer{
            background:#96f; /* Чтобы был виден футер */
            height:50px; /* высота футера */
            margin-top:-50px; /* отрицательный margin, равный высоте футера */
        }
    </style>
</head>
<body>
     <div class="container">
        <div class="content">
         Кузен Бенедікт носив у спеціальній бляшанці на паску через плече всю зібрану тут колекцію комах.
         У колекції були, між іншим, кілька представників ста-філіна, хижого жука, очі якого розташовані у
         верхній частині голови; досі вважалося, що стафілін водиться тільки в Новій Каледонії.
         Кузенові Бенедікту пропонували також отруйного павука «катіпо» - так називають його маорі(5),- укус якого
         часто смертельний для людини. Однак павук не належить до класу комах - місце йому в колекції
         павукоподібних,- тож він не мав ніякої цінності для кузена Бенедікта. І наш ентомолог зневажливо
         відмовився від павука: найціннішим скарбом у його колекції, звісно, був знаменитий новозеландський стафілін.
          </div>
     </div>
    <div class="footer">
    <a href="https://bloggood.ru/">BlogGood.ru</a> © Прижимание футера к низу
    </div>
</body>
</html>

Результат:

В коде присутствуют комментарии, так что код под свой проект настроить сможете.

Внимание! Если после сохранения файла у вас вот такая картина Малевича, вам нужно перекодировать файл в UTF-8:

Как перекодировать файл в UTF-8, читайте тут.

Спасибо всем, кто любит читать мой блог BlogGood.ru и является постоянным моим читателем! Всех, кто еще не подписан на обновление блога приглашаю подписаться.