Наша взаимовыгодная связь https://banwar.org/
Як притиснути підвал сайту (footer) в самий низ вікна браузера, щоб сторінка при цьому виглядала витягнутої на всю висоту, незалежно від обсягу тексту, а при висоті сторінки, більшою, ніж висота вікна браузера (при появі скролла), футер залишався б на призначеному йому місці.
Якщо за допомогою таблиць дана задача вирішується лише зазначенням висоти для таблиці і / або вкладеної в неї осередку, то при використанні CSS блокової верстці застосовується зовсім інший підхід.
У процесі практики виділили 5 способів притискання футера до низу вікна браузера за допомогою CSS.
HTML-код всіх представлених способів має наступну структуру (відмінність лише в CSS-коді):
<Html> <body> <div class = "wrapper"> <div class = "content"> </ div> <div class = "footer"> </ div> </ div> </ body> </ html>
В CSS-код, наведений нижче, включені тільки ті властивості, які мінімально необхідні для реалізації відповідного способу. По кожному з них ви можете подивитися живий приклад.
перший спосіб
Footer притискається вниз шляхом його абсолютного позиціонування і витягування висоти батьківських блоків (html, body і .wrapper) на 100%. При цьому контентному блоку .content потрібно вказати нижній відступ, який дорівнює або більше висоти підвалу, інакше останній закриє частину контенту.
* {Margin: 0; padding: 0; } Html, body {height: 100%; } .Wrapper {position: relative; min-height: 100%; } .Content {padding-bottom: 90px; } .Footer {position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; }
другий спосіб
Footer притискається вниз за рахунок витягування блоку контенту і його «батьків» на всю висоту вікна браузера і підйому футера вгору через негативний відступ (margin-top) для позбавлення від з'являється при цьому вертикального скролла. В даному випадку необхідно обов'язково вказати висоту підвалу, і вона повинна бути дорівнює величині відступу.
* {Margin: 0; padding: 0; } Html, body, .wrapper {height: 100%; } .Content {box-sizing: border-box; min-height: 100%; padding-bottom: 90px; } .Footer {height: 80px; margin-top: -80px; }
Завдяки властивості box-sizing: border-box, ми не дозволяємо блоку з класом .content перевищити висоту 100%. Тобто в даному випадку min-height: 100% + padding-bottom: 90px дорівнює 100% висоти вікна браузера.
третій спосіб
Він хороший тим, що, на відміну від інших способів (крім 5-го), висота футера значення не має.
* {Margin: 0; padding: 0; } Html, body {height: 100%; } .Wrapper {display: table; height: 100%; } .Content {display: table-row; height: 100%; }
Тут ми емулюючи поведінку таблиці, перетворивши блок .wrapper в таблицю, а блок .content в рядок таблиці (властивості display: table і display: table-row відповідно). Завдяки цьому, а також тому, що блоку .content і всім його батьківським контейнерів задана висота 100%, контент розтягується на всю висоту, але за мінусом висоти футера, яка визначається автоматично - емуляція таблиці не дає підвалу вилізти за межі висоти вікна браузера.
В результаті footer притиснутий до низу.
четвертий спосіб
Даний спосіб не схожий ні на один з попередніх, і його особливість полягає в використанні CSS-функції calc () і одиниці виміру vh, які підтримуються тільки сучасними браузерами. Тут необхідно знати точну висоту підвалу.
* {Margin: 0; padding: 0; } .Content {min-height: calc (100vh - 80px); }
> 100vh - це висота вікна браузера, а 80px - це висота футера. І за допомогою функції calc () ми віднімаємо другу величину з першої, тим самим притискаючи футер до низу.
Дізнатися, які браузери підтримують calc () і vh, ви можете на сайті caniuse.com за наступними посиланнями: підтримка функції calc () , підтримка одиниці виміру vh .
П'ятий спосіб (найактуальніший)
Це кращий спосіб з усіх представлених, однак працює він тільки в сучасних браузерах, котортие підтримують CSS властивість flex. Як і в третьому способі, висота футера значення не має.
* {Margin: 0; padding: 0; } Html, body {height: 100%; } .Wrapper {display: flex; flex-direction: column; height: 100%; } .Content {flex: 1 0 auto; } .Footer {flex: 0 0 auto; }
Дізнатися про підтримку браузерами властивості flex можна тут .
Голосів: 329 | Переглядів 3400