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

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

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

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

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

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

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

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

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


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