Як притиснути футер до нижньої межі сторінки (позиціонування).

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

Відео: Притиснута футер на CSS

Всім привіт! У цій статті ми розглянемо ще один простий, але робочий спосіб притиснення футера до нижньої межі сторінки.

Отже, спочатку розглянемо розмітку.

Відео: Як притиснути футер до низу

class="Wrapper"gt; 
class="Header"gt; 
 Це верхня частина сторінки 
 
class="Content"gt; 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio voluptas fugiat, culpa repellendus natus impedit cum blanditiis, similique magni ipsam quidem minus praesentium excepturi repudiandae nisi sapiente sed eius autem doloribus tempora reprehenderit deserunt ipsum? Iusto a nisi, placeat voluptatum ipsam modi laboriosam recusandae dolorem accusantium fugit illo officia, aliquid nesciunt dolorum, excepturi. Eius animi, nihil, magni aliquam, officia consequatur sit soluta illum nisi voluptas error ex quas unde ea. 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio voluptas fugiat, culpa repellendus natus impedit cum blanditiis, similique magni ipsam quidem minus praesentium excepturi repudiandae nisi sapiente sed eius autem doloribus tempora reprehenderit deserunt ipsum? Iusto a nisi, placeat voluptatum ipsam modi laboriosam recusandae dolorem accusantium fugit illo officia, aliquid nesciunt dolorum, excepturi. Eius animi, nihil, magni aliquam, officia consequatur sit soluta illum nisi voluptas error ex quas unde ea. 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio voluptas fugiat, culpa repellendus natus impedit cum blanditiis, similique magni ipsam quidem minus praesentium excepturi repudiandae nisi sapiente sed eius autem doloribus tempora reprehenderit deserunt ipsum? Iusto a nisi, placeat voluptatum ipsam modi laboriosam recusandae dolorem accusantium fugit illo officia, aliquid nesciunt dolorum, excepturi. Eius animi, nihil, magni aliquam, officia consequatur sit soluta illum nisi voluptas error ex quas unde ea. 
 
class="Footer"gt; 
 Це нижня частина сторінки

Тут все елементарно і пояснень, думаю, не вимагає.

Давайте перейдемо до CSS!

html, body { 
 height:100% - 
} 
 
.wrapper { 
 min-height:100% - 
 position: relative- 
} 
 
.content { 
 padding-bottom:57px- 
} 
 
.footer { 
 position: absolute- 
 left:0- 
 bottom:0- 
 width:100% - 
 height:57px- 
}

Ось, власне, і все! Отже, що ж ми тут робимо? Спочатку нам потрібно задати мінімальну висоту для нашої обгортки, але, як ви вже повинні знати, щоб висота у дочірнього блоку була 100%, потрібно, щоб і у всіх інших блоків вона також була 100%, тому ми і ставимо висоту для блоків html і body. Далі ми задаємо відносне позиціонування блоку з класом wrapper, щоб потім поставити абсолютне позиціонування блоку footer і вирівняти його так, як нам потрібно. щоб footer НЕ наїжджав на блок content, ми повинні також виставити нижній відступ блоку content, рівний за значенням висоті footer. Як бачите, все досить просто, проте, як ви вже могли помітити, тут є один явний недолік - висота нашого footer`А завжди повинна бути статичною, і, якщо ми захочемо її змінити, то доведеться також міняти і нижній відступ у блоку з класом content. Однак, в більшості випадків цього способу більш ніж достатньо, але, якщо ви хочете дізнатися, як прибрати цей недолік і зробити так, щоб наш footer міг бути гумовим, то дочекайтеся наступної статті, саме там ми це і розглянемо!