X
Юрий Немец

Прижать блок в низу 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 КОД
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 консультацию!

Успехов!

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

Категории: CSS3