Иногда на небольших сайтах, где вся информация на странице помещается в один экран есть необходимость прижимать footer сайта к низу экрана. В противном случае footer будет идти сразу после контентной части, а между концом блока футера и нижней частью экрана останется «просвет». Проблему можно решить при помощи css стилей.
Как прижать блок сайта к низу экрана
Давайте рассмотрим простой пример, состоящий из 3-х основных блоков, шапки сайта, контентной части и футера.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="container"> <div class="header"> <!-- Содержимое шапки --> </div> <div class="content"> <!-- Содержимое контентной/центральной части --> </div> <div class="footer"> <!-- Содержимое нижнего блока --> </div> </div> |
В примере у нас есть родительский общий блок container и три вложенных блока шапки, контента и футера. Рассмотрим CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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; } |
Результат можно посмотреть в демо примере.
Надеюсь вам поможет рассмотренный пример. Желаю удачи!
Оставьте первый комментарий!