Як притиснути футер до низу сторінки (табличний спосіб).

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

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

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

HTML верстка:

class="Wrapper"gt; 
class="Header"gt; 
 This is the header 
 
class="Content"gt; 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rerum quidem eveniet. Sed laboriosam rem consectetur harum nam, aliquid ipsum molestiae explicabo aliquam, debitis hic voluptate blanditiis tempora id minus magnam corporis accusantium reiciendis cupiditate! Ab ipsa, ratione corrupti vitae, eos maiores odio eaque suscipit quas tempore reprehenderit recusandae inventore. 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rerum quidem eveniet. Sed laboriosam rem consectetur harum nam, aliquid ipsum molestiae explicabo aliquam, debitis hic voluptate blanditiis tempora id minus magnam corporis accusantium reiciendis cupiditate! Ab ipsa, ratione corrupti vitae, eos maiores odio eaque suscipit quas tempore reprehenderit recusandae inventore. 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rerum quidem eveniet. Sed laboriosam rem consectetur harum nam, aliquid ipsum molestiae explicabo aliquam, debitis hic voluptate blanditiis tempora id minus magnam corporis accusantium reiciendis cupiditate! Ab ipsa, ratione corrupti vitae, eos maiores odio eaque suscipit quas tempore reprehenderit recusandae inventore. 
 
class="Footer"gt; 
 This is the footer

І CSS код:

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

html, body { 
 height:100% - 
} 
 
.wrapper { 
 min-height:100% - 
 display: table- 
} 
 
.header,.content,.footer { 
 display: table-row- 
} 
 
.header,.footer { 
 height:1px- 
}

Отже, тут ми для обгортки задаємо властивість display, рівне table, щоб даний блок став вести себе, як таблиця, а для блоків header, content і footer задаємо значення display, рівне table-row, щоб вони стали вести себе, як ряди таблиці. Однак, при такому підході блоки header і footer матимуть не свою реальну висоту, а висоту ряду таблиці за замовчуванням. Щоб це виправити, ми задаємо для них висоту свідомо меншу, ніж реальна висота цих блоків - 1px.

Отже, ось і все! Дякую за увагу і удачі!

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

Схожі