Иногда на небольших сайтах, где вся информация на странице помещается в один экран есть необходимость прижимать 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 направлений.
Вам также могут понравиться
Создание заказа в 1С Битрикс D7

Создание заказа в 1С Битрикс D7

Рассмотрим пример создания произвольного заказа средствами ядра D7


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