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

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

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

Припустимо, є такий HTML-код:

 
id="Main"gt; 
 текст 
 
id="Footer"gt; 
 підвал

щоб притиснути футер до низу, треба застосувати до даного HTML-коду наступного CSS-код:

Відео: Як притиснути футер до нижньої межі вікна браузера

html { 
 height:100% - 
} 
body { 
 height:auto!important-// Обов`язково, якщо контенту в main буде багато 
 height:100% - 
 min-height:100% - 
} 
#main { 
 padding-bottom:50px- 
} 
#footer { 
 bottom:0- 
 height:50px- 
 position: absolute- 
}

Тут все прозоро, але скажу тільки, що рядок "height: auto! important-"Дозволяє враховувати те, що якщо контенту в main буде більше, ніж висота сторінки, то висота буде більше, ніж 100%. Без неї підвал просто налізатиме на контент і завжди буде знаходитися в одному і тому ж місці.

На жаль, рішення не блищить красою, але інші, на мій погляд, ще гірше. А взагалі коли контенту мало, то я просто внизу залишаю колір фону сайту. Але замовник іноді просить все-таки притиснути підвал до низу, і тоді я використовую спосіб, описаний в даній статті.

Поділися в соціальних мережах:

Схожі