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

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

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore rerum quidem eveniet. Sed laboriosam rem consectetur harum nam, aliquid ipsum molestiae explicabo aliquam, debitis його 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.

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.

Отож і все! Дякуємо за увагу та удачі!

Додайте до мене у друзіВКонтакте: http://vk.com/myrusakov. Якщо Ви хочете дати оцінку мені та моїй роботі, то напишіть її в моїй групі: http://vk.com /rusakovmy.

Запропонуйте цю статтю друзям:

Якщо Вам сподобався сайт, розмістіть посилання на нього (у себе на сайті, на форумі, в контакті):

Вона виглядає ось так:

BB-код посилання для форумів (наприклад, можете поставити його у підписі):

Коментарі ( 2 ):

Легко і просто :) Мені подобається практично.

У мене не працює. Футер не притискається до низу сторінки, а йде відразу за вмістом. Заробила тільки за властивості класу wrapper не min-height: 100%; а просто height: 100%;