Иногда на небольших сайтах, где вся информация на странице помещается в один экран есть необходимость прижимать 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;
}

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

Демо

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

Полезная статья?
(Нет голосов)
Вам также могут понравиться
Объективно о преимуществах и недостатках 1С-Битрикс

Объективно о преимуществах и недостатках 1С-Битрикс

С развитием интернета появилось много платформ, которые помогают начинающим бизнесменам создать и сделать рентабельным и успешным интернет-магазин. Но подобрать действительно эффективную площадку не так-то просто. Что необходимо знать, чтобы не прогореть, какой тип платформы выбрать. Об этом поговорим в этой статье.

Авторизация на сайте при помощи Вконтакте

Авторизация на сайте при помощи Вконтакте

Большинство социальных сетей позволяют использовать свои API для авторизации пользователей на сайте имеющих аккаунт в данной социальной сети. В статье рассмотрен способ авторизации при помощи API вконтакте.ру.

Исключения в PHP, что это и как ими пользоваться

Исключения в PHP, что это и как ими пользоваться

В этой статье вы узнаете что такое исключения в PHP и как их использовать для обработки ошибок. Начиная с PHP версии 5.0 стала доступна новая модель обработки ошибок, так называемые исключения. Она позволяет более гибко и информативно для пользователя обрабатывать не стандартные ситуации в работе вашего приложения. 


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