BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

<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>

Результат:

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

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

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

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

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

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки:

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573