Иногда на небольших сайтах, где вся информация на странице помещается в один экран есть необходимость прижимать footer сайта к низу экрана. В противном случае footer будет идти сразу после контентной части, а между концом блока футера и нижней частью экрана останется «просвет». Проблему можно решить при помощи css стилей.

Как прижать блок сайта к низу экрана

Давайте рассмотрим простой пример, состоящий из 3-х основных блоков, шапки сайта, контентной части и футера.


<div class="container">
    <div class="header">
        <!-- Содержимое шапки -->
    </div>
    <div class="content">
        <!-- Содержимое контентной/центральной части -->
    </div>
    <div class="footer">
        <!-- Содержимое нижнего блока -->
    </div>
</div>

В примере у нас есть родительский общий блок container и три вложенных блока шапки, контента и футера. Рассмотрим CSS.

html,
body {
    height:100%;
}

.container {
    min-height:100%;
    position:relative;
    text-align: center;
    max-width: 60%;
    margin: 0 auto;
}

/*Шапка сайта*/
.header {
    background:#EEE;
    padding:10px;
}

/*Контентная часть*/
.content {
    padding-bottom:70px; /*Отступаем от низа экрана на высоту блока footer*/
}

/*Стили для нижней части*/
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:70px;
    background:#CCC;
}

Результат можно посмотреть в демо примере. 

Демо

Надеюсь вам поможет рассмотренный пример. Желаю удачи!

Полезная статья?
(Нет голосов)
Курсы
IT-курсы от автора блога it-svalka.ru

Все курсы
Вам также могут понравиться
Кем можно работать в сфере веб-разработки

Кем можно работать в сфере веб-разработки

Хотите начать работать в сфере веб-разработки, но не знаете с чего можно начать? Читайте описание самых популярных веб-профессий, с их описанием, обязанностями и ориентировочными зарплатами.

CSS курсоры

CSS курсоры

В статье рассмотрены возможности изменения курсоров пользователя при помощи CSS

Работа с регистром строк в php

Работа с регистром строк в php

В статье рассмотрены примеры работы с регистром строк в языке PHP, проверка регистра, изменение, инверсия


Комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке