Притиснути блок в низу css - як притиснути блок до низу

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

Інші статті на тему CSS3:

• Банери на чистому CSS
• Креативні блоки з анімацією на CSS
• Оформляємо списки на CSS

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

Відео: Створюємо сайт на HTML5 + CSS3 | Урок №3 - Прикріплюємо футер до низу сайту

Як має виглядати після вирішення проблеми: притиснути футер до низу сторінки, якщо контенту не вистачає.

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

На даній сторінці Ви можете подивитися сторінку, яка створена саме таким чином:

Подивитися прімерСкачать

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

Як притиснути блок до низу?

1 HTML структура

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

1234567891011

lt;div id="Container"gt;lt;div id="Header"gt;lt;/divgt;lt;div id="Body"gt;lt;/divgt;lt;div id="Footer"gt;lt;/divgt;lt;/divgt;

Відео: Рішення траблів CSS # 1: як притиснути футер у низу сторінки

Один загальний блок, в якому знаходяться три видимих блоку.

2 стилі CSS

Тут також все досить просто:

1234567891011121314151617181920212223242526272829

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 консультацію!

Успіхів!