Лого www.SiteHere.ru

Прижать блок в низу CSS — как прижать блок к низу

Данная проблема наблюдается у страниц, которые предусмотрены для одного экрана, то есть страницы полностью видны без прокрутки. Нижний блок не прижимается к низу окна браузера и смотрится это не очень красиво. Проблему легко решить с помощью правильного применения CSS свойств и прижать блок к низу.

Другие статьи на тему CSS3:

В чем проблема: футер (нижняя часть сайта) по умолчанию становится сразу за основным контентом и не прижимается к низу страницы.

Как должно выглядеть после решения проблемы: прижать футер к низу страницы, если контента не хватает.

На изображении ниже слева отображена страница на которой нижняя часть идет сразу за контентом (проблема), а справа страница с решенной проблемой, где нижний блок всегда прижат к низу.

Прижатый и неприжатый футер к низу

На данной странице Вы можете посмотреть страницу, которая создана именно таким образом:

Посмотреть примерСкачать

Если Вы хотите научиться создавать продающие страницы с нуля, а не только подписные, тогда рекомендую свой мини-курс: "Лендинг за 60 минут".

Как прижать блок к низу?

1 HTML структура

Рассмотрим всё на простой структуре из 3-х блоков:

HTML КОД
1
2
3
4
5
6
7
8
9
10
11
<div id="container">
    <div id="header">
        <!-- Содержимое шапки -->
    </div>
    <div id="body">
        <!-- Содержимое центральной части -->
    </div>
    <div id="footer">
        <!-- Содержимое нижнего блока -->
    </div>
</div>

Один общий блок, в котором находятся три видимых блока.

2 Стили CSS

CSS Часть

Здесь также всё довольно просто:

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
html,
body {
  height:100%;
}
 
#container {
   min-height:100%;
   position:relative;
}
 
/*Стили для блока с шапкой*/
#header {
   background:#222;
   padding:10px;
}
 
/*Стили для центральной части*/
#body {
   padding-bottom:70px;   /* Высота блока "footer" */
}
 
/*Стили для нижней части*/
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:70px;   /* Высота блока "footer" */
   background:#66ccff;
}

Здесь хочу отметить строки с комментариями, которые находятся за свойствами. Это внутренний отступ снизу у центральной части и это же число у высоты нижней части (футера). В этом и есть весь секрет.

Вывод

Для сайтов, которые рассчитаны для одного экрана, это простой способ решить проблему и прижать блок к низу на чистом CSS.

Если не получается прижать блок к низу: Вы можете обратиться ко мне за помощью, предварительно записавшись на SKYPE консультацию!

Успехов!

С Уважением, Юрий Немец

Прижать блок в низу CSS — как прижать блок к низу 5.00/5 (100.00%) 7 голос(ов)

Понравилась статья - расскажи друзьям! :)

6 комментариев к записи
  • Иван

    ок. если сайт адаптивный и при уменьшении экрана высота футера изменилась?

     
    • Юрий

      Для этого есть Media queries.

       
      • Иван

        есть рабочие примеры адаптивных сайтов, где вы применяли этот способ?

         
        • Иван

          Ссылка — вот пример такой верстки

           
  • Евгений

    В 2009 году мне как раз нужно было такое решение, в сети я тогда ничего не нашел готового. Пол дня просидел с футером, но все таки сделал. Мое решение было похожим на это в итоге. Но это был единственный случай когда это понадобилось. Сейчас обычным делом контента уже достаточно на сайтах что бы сделать стандартный дизайн. Но может быть действительно и кому то будет и нужно. 

     
  • Александр

    Спасибо! Долго маелся с этим футером. Перепробовал кучу способов, но у вас самый простой 🙂

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *