Цей тег може використовуватися, як і попередні теги кілька разів на сторінці. Ви, напевно вже здогадалися з назви, що він є підвалом сторінки. У ньому можна розташовувати лічильники, текст про авторські права на сайт, контактні дані і т.п. Можливо також вставити панель навігації () в підвал сторінки. Ніхто не забороняє вставляти і такі нові елементи, як aside і section, але я б на вашому місці все-таки цього не робив.
і
Шапка сайту
пост №1
Тут ми будемо писати текст першого поста.
пост №2
Тут ми будемо писати текст другого поста.
В результаті повинен вийти наступний результат:
З цього прикладу випливає, що кожна окрема стаття або пост можуть мати свої елементи
Ну ось ви і познайомилися з основними структурними елементами HTML5, а наступних уроках ми з вами розглянемо ще більше нових елементів, різні форми, яких не було в інших специфікаціях HTML!
Привіт, шановні читачі блогу сайт. Продовжуємо тему блокової верстки, яка була розпочата і продовжена в трьох попередніх статтях. В принципі, нам вже вдалося створити як дво-, так і трехколоночной макет сайту, і ми навіть встигли розглянути нюанси створення гумового макета.
Крім цього в перших статтях, присвячених верстці сайту (), були розглянуті деякі базові поняття вебмастерінга, без розуміння яких було б досить важко розібратися в нюансах.
Які проблеми виникли з нашим макетом сайту
Сьогодні ми спробуємо вирішити одну невелику проблему, яка може виникнути з створеним нами раніше макетом. Найчастіше така ситуація виникає при перегляді його на великих моніторах (з високою роздільною здатністю) і при відображенні сторінки з малою кількістю інформації.
В цьому випадку може вийти так, що футер НЕ буде притиснутий до низу екрану, а розташовуватиметься мало не на його середині по висоті, що в більшості випадків буде виглядати негарно і не естетично.
Все ж, на мою думку, притиснути footer до самого низу макета сайту потрібно, і особливо це буде актуально в разі, коли висота сторінки вийти менше, ніж висота екрану користувача. Схематично це можна представити так:
Тобто правильна поведінка футера для випадку малої кількості інформації на сторінці і великого екрану користувача буде наступним:
Що б це реалізувати, потрібно здійснити ряд маніпуляцій з кодом нашого макета. Причому, зміни ми будемо вносити не тільки в файл стильового CSS оформлення Style.css, але і в Index.html, що містить Html код і формує Div блоки. Але про все по порядку.
Для прикладу ми будемо використовувати створений нами раніше трехколоночной макет сайту. При цьому Index.html буде виглядати так:
А в файлі Style.css були прописані такі CSS властивості:
Body, html (margin: 0px; padding: 0px;) #maket (width: 800px; margin: 0 auto;) #header (background-color: # C0C000;) #left (background-color: # 00C0C0; width: 200px ; float: left;) #right (width: 200px; background-color: # FFFF00; float: right;) #content (background-color: # 8080FF; margin-left: 202px; margin-right: 202px;) #footer (background-color: # FFC0FF; clear: both;)
Ну, а сам макет виглядав приблизно так:
Як бачите, футер НЕ притиснутий до низу і, отже, не задовольняє нашим вимогам (він розташовується завжди під самою нижньою колонкою), тому доведеться внести корективи в код. Все те ж саме можна буде зробити і для двоколонковому, і для гумового макета теж. Метод універсальний.
Як притиснути футер до низу макета сайту
Отже, нам потрібно змістити Div контейнер з футером до низу екрану. Для цього спочатку потрібно задати висоту всієї сторінки, рівну ста відсоткам (вона буде займати весь екран). Це потрібно буде для того, щоб потім змінити розмір основного блоку з макетом теж до 100%.
Весь вміст сторінки сайту поміщається в відкриває і закриває теги Body і тому нам потрібно в Style.css дописати для тега Body ще одне CSS властивість, що задає висоту дорівнює 100%:
Body, html (margin: 0px; padding: 0px; height: 100%;)
На зовнішньому вигляді це ніяк поки не відіб'ється, але зате тепер основний блог можна буде розтягнутися на всю висоту екрану. Тобто це був своєрідний підготовчий етап.
Основні властивості CSS, при бажанні, ви можете подивитися. Тепер задамо для Div контейнера, в якому укладено весь наш макет, мінімальну висоту рівну 100%:
Ще я хочу його підсвітити (div з id = "maket"). Для цього задам йому рамку за допомогою відповідного властивості Border ():
Властивість border: solid 3px black дозволяє задати для даного контейнера суцільну рамку (solid) товщиною в 3 пікселі чорного кольору. Це дозволить наочно побачити, що контейнер з макетом розтягнувся на всю висоту екрану навіть при малій кількості інформації на сторінці:
Тепер нам потрібно буде винести блок футера із загального контейнера і розмістити його нижче, відразу ж після спільного. Що це дасть? А то, що, нарешті, зволить опуститися вниз футер в макеті, а не буде як раніше притискатися до найдовшої його колонці. В цьому випадку Index.html прийме наступний вигляд:
Зверніть увагу, блок з футером тепер не знаходиться всередині загального контейнера (maket), а отже його ширина тепер уже не регулюється CSS властивостями, заданими для maket в файлі зі стильовим оформленням Style.css. Футер буде по ширині розтягуватися на весь екран, але все-таки він вже буде розташований в нижній частині екрана, відразу під основним блоком:
Але знову виникає проблема, бо для того, щоб побачити підвал, тепер доводиться прокручувати екран в браузері (бачите на наведеному малюнку смугу прокрутки).
Виходить це тому, що основний контейнер (maket) займає по висоті весь розмір екрану (це визначається властивістю min-height: 100%), а футер розташовується відразу за ним і для його перегляду вже доведеться використовувати прокрутку, що не дуже то зручно і функціонально .
Вирішити цю проблему можна, задавши негативний відступ для Div контейнера з футером для того, щоб він змістився вгору, на відстань рівне його висоті. При цьому контейнер footer наїде на основний і впишеться в висоту екрану браузера (тобто не потрібно буде використовувати прокрутку для його перегляду).
Але для того, щоб задати негативний відступ від верху, потрібно знати цю саму висоту footer, а ми її поки що не знаємо.
Тому спочатку поставимо контейнеру містить підвал висоту, прописавши відповідне властивість в Style.css:
#footer (background-color: # FFC0FF; clear: both; height: 50px;)
А потім задаємо для нього негативний відступ зверху на висоту рівну його висоті:
Це дозволить підвалу піднятися вгору рівно на свою власну висоту і тим самим вписується в екран браузера (тепер можна прибрати CSS властивість border: solid 3px black з правила для maket, щоб товщина рамки не заважала всьому нашому макету разом з футером поміститися в екрані по висоті) :
Як бачите, тепер смуга прокрутки в браузері не виникає і весь наш трехколоночной макет сайту на основі блокової верстки поміщається в одному екрані (у разі малої кількості інформації на сторінці) і має футер, розташований в самому низу. Що нам, власне, і було потрібно зробити.
Вставляємо розпірку і боремося з Internet Explorer
але виникає проблема, Яка проявиться лише тоді, коли інформації на сторінці макета побільшає і може вийти така ситуація:
Виходить, що може виникнути ситуація, коли інформація в одній з колонок макета наїде на футер, що буде виглядати не красиво. Відбувається це через горезвісний негативного відступу, який ми задали для нього і який допоміг підняти наш підвал з наїздом на основний контейнер макета.
Тобто виходить, що в нижній частині екрана розташовані два блоки, що перекривають один одного в області підвалу.
Рішення даної проблеми полягає в додаванні нового порожнього Div контейнера (так званої розпірки) В основний контейнер нашого макета (maket), в те місце, де раніше розташовувався блок з футером.
Задавши для цього нового контейнера висоту, рівну висоті підвалу, ми зможемо уникнути наїзду інформації з основного контейнера на блок з футером. Дамо цього контейнеру ID () з назвою Rasporka і в результаті Index.html нашого трехколоночной макета набуде вигляду:
А в Style.css пропишемо для цього (, що задає висоту цього контейнеру-розпірці рівну висоті підвалу:
#rasporka (height: 50px;)
В результаті футер буде притискатися знизу не до інформації, що міститься в основному контейнері (наприклад, текст в найвищій колонці), а на рівну підвалу по висоті область з контейнером-розпіркою, що не містить ніякої інформації.
Таким чином ми уникаємо наїздів і перекосів в нашому трехколоночной макеті. Все буде чітко і красиво (чинно і благородно):
Як я вже згадував вище, ширина футера тепер у нас повинна задаватися окремо, тому що цей контейнер тепер не входить до складу основного. Для цього потрібно додати в CSS файл додаткові властивості для Footer, що дозволяють поставити його ширину і вирівняти його посередині екрану по горизонталі.
Ширину має сенс задати рівній ширині всього макета за допомогою властивості Width, а вирівнювання по горизонталі можна здійснити таким же способом, як ми це зробили для всього макета на блокової верстці.
Таким чином, нам потрібно буде додати для ID Footer додаткові властивості:
#footer (background-color: # FFC0FF; clear: both; height: 20px; margin-top: -20px; width: 800px; margin-left: auto; margin-right: auto;)
За допомогою властивості width: 800px задається ширина рівна 800 пікселів, а за допомогою двох властивостей margin-left: auto і margin-right: auto задається настройка відступу зліва і праворуч від підвалу автоматично, в результаті чого ці відступи будуть рівними і наш герой вирівняється по середині:
Ну от, начебто більше вже нічого покращувати, але не тут-то було. Як завжди наш улюблений браузер Internet Explorer 6 чогось та не розуміє з використовуваних нами властивостей CSS. У цьому браузері (і, можливо, в якихось інших старих теж) не дивлячись на всі наші старання підвал не буде притиснутий до низу, а як і раніше буде прилипати до найвищої колонці макета сайту.
Все це відбувається через те, що (не розуміє властивість min-height: 100%, яке ми використовували для завдання мінімальної висоти основного блоку, що дорівнює висоті екрану.
Тому для вирішення цієї проблеми нам доведеться застосувати так званий хак, що дозволяє пояснити (на пальцях) старим браузерам, що потрібно робити. Перед списком CSS властивостей для maket потрібно буде вставити наступну комбінацію:
* Html #maket (height: 100%;)
Це правило буде застосовано тільки для браузера Internet Explorer 6, інші не будуть його враховувати і виконувати.
Отже, остаточний вигляд Style.css з притиснутим до низу екрану футером буде наступним:
Body, html (margin: 0px; padding: 0px; height: 100%;) * html #maket (height: 100%;) #maket (width: 800px; margin: 0 auto; min-height: 100%;) # header (background-color: # C0C000;) #left (background-color: # 00C0C0; width: 200px; float: left;) #right (width: 200px; background-color: # FFFF00; float: right;) #content (background-color: # 8080FF; margin-left: 202px; margin-right: 202px;) #footer (background-color: # FFC0FF; clear: both; height: 50px; margin-top: -50px; width: 800px; margin-left: auto; margin-right: auto;) #rasporka (height: 50px;)
Ну, а остаточний вигляд Index.html був приведений трохи вище. Все, на цьому серію статей, присвячену блокової верстці 2 і 3 стовпчики фіксованих і гумових макетів сайту, можна вважати завершеною.
Можете також подивитися відео «Робота з Html тегом div»:
Удачі вам! До швидких зустрічей на сторінках блогу сайт
Вам може бути цікаво
Блокова верстка - Створюємо двоколонковому, трехколоночной і гумовий макети для сайту 
DiV верстка - Створюємо блоки для двоколонковому макета в HTML, визначаємо їх розміри і задаємо позиціонування в CSS
Це кошмар якийсь! Чому підвал вашого сайту знову «спливає» і зрушує дизайн? Невже не можна нормально притиснути футер до низу сторінки чимось? Контентом або цеглою хоча-б! Цегла в монітор пролазить?
Зрозуміло, тоді сидите і нічого не робіть, поки не прочитаєте нашу статтю до кінця.
Робимо правильний футер для свого сайту
Багато власників сайтів зустрічаються з цією проблемою, коли footer сторінки просто спливає «догори». І тоді незрозуміло, що робити. Найчастіше таким недоліком грішать дизайни сайтів, зверстані на швидку руку, самостійно ( гурток «очманілі ручки») Або початківцями веб-майстрами.
При цьому на перших порах життя сайту нічого жахливого не відбувається. І така ідилія триває до тих пір, поки контент тисне «своєю вагою» на підвал, не даючи йому піднятися вгору. Але варто розмістити на сторінці матеріал меншого обсягу, і недавно «спокійний» футер моментально піднімається вгору, приводячи весь дизайн сайту в неналежний вигляд.
Для усунення цього «дефекту» зверстаного шаблону не обов'язково витрачатися на послуги веб-майстра. Найчастіше футер сайту можна поставити на місце самостійно. Розглянемо всі можливі варіанти усунення подібної проблеми:
перший спосіб
Перший спосіб «прив'язати» підвал «до дна» сторінки побудований на основі CSS. Для початку наведемо код прикладу, а потім більш детально розглянемо його реалізацію:
html (height: 100%;) header, nav, section, article, aside, footer (display: block;) body (height: 100%;) #wrapper (width: 1000px; margin: 0 auto; min-height: 100 %; height: auto! important; height: 100%;) #header (height: 150px; background-color: rgb (0,255,255);) #content (padding: 100px; height: 400px; background-color: rgb (51,255,102) ;) #footer (width: 1000px; margin: -100px auto 0; height: 100px; position: relative; background-color: rgb (51,51,204);)
Для того щоб приклеїти підвал до низу сторінки тег
html (height: 100%;) body (height: 100%;)
Мінімальну висоту шару-контейнера встановлюємо теж в 100%. Для випадку, якщо ширина контенту буде більше, ніж висота контейнера, задаємо властивості значення auto. Завдяки цьому wrapper буде автоматично підлаштовуватися під ширину розміщеного на сторінці контенту:
#wrapper (min-height: 100%; height: auto! important; height: 100%;)
Рядок коду «height: 100%» призначена для старих версій IE, які не сприймають властивість min-height.
Щоб в дизайні сторінки відокремити місце під підвал, ми встановлюємо відступ для тега
#content (padding: 100px;)
На даному етапі ми отримали веб-сторінку шириною у весь екран і додатково 100 пікселів, які «нейтралізуються» від'ємним значенням відступу для футера (margin: -100px) при встановленому для нього відносному позиціонуванні (position: relative). Таким чином, за допомогою від'ємного значення відступу ми «зрушує» підвал в область контейнера, для якого встановлена висота в 100%.
В даному прикладі розмітка веб-документа задана за допомогою порівняно нових тегів HTML 5, які можуть бути неправильно інтерпретовані застарілими версіями браузерів. Через це весь дизайн сторінки може бути відображений некоректно. Щоб уникнути цього, потрібно нові теги з арсеналу 5 версії мови гіпертексту замінити на звичайні
вдосконалений варіант
Розглянутий вище спосіб того, як зробити футер внизу сторінки «непорушним» не всім підходить. Якщо в майбутньому ви збираєтеся модифікувати і вдосконалювати дизайн свого сайту за допомогою спливаючих вікон, тоді краще відмовитися від використання попередньої реалізації.
Найчастіше в реалізації pop-up вікон використовується властивість CSS z-index. За допомогою його значень задається порядок накладення шарів один на одного.
Чим більше значення z-index елемента, тим вище він буде перебувати в загальному стеку «нашарування».
Але через те, що в попередньому прикладі ми використовували від'ємне значення для футера, нижня частина спливаючого вікна буде перекриватися верхньої областю підвалу. Навіть незважаючи на те, що воно буде мати більше значення z-index. Тому що у батька спливаючого вікна (wrapper) значення цієї властивості все одно менше.
Ось більш досконалий варіант:
CSS - код прикладу:
html, body (height: 100%;) .header (height: 120px; background-color: rgb (0,255,102);) .main (min-height: 100%; position: relative; background-color: rgb (100,255,255); ) .footer (height: 150px; position: absolute; left: 0; bottom: 0; width: 100%; background-color: rgb (0,0,153);)
Як видно з коду, підвал ми помістили до складу основного елемента. Контейнера ми задали відносне позиціонування, а для футера - абсолютне. Підвал ми закріпили в самому низу контейнера, встановивши його положення зліва і зверху в 0.
Варіант для підвалу з нефіксованим висотою
Попередні способи реалізації можуть гарантувати, що футер буде завжди внизу сторінки. Але тільки якщо підвал фіксованої ширини. А що робити, якщо кількість розміщується в ньому контенту не можна спрогнозувати?
Для цього буде потрібно більш досконалий варіант для нефіксованого підвалу. У ньому футера задається значення table-row для властивості display. Завдяки цьому він буде відображатися як рядок таблиці.
Якщо взуття це підсумкова складова будь-якого наряду, то футер для сайту e-Commerce - завершальний елемент його продає дизайну. Приділяючи увагу самому нижньому елементу «підвалу», сучасні веб-сайти готові продемонструвати свою індивідуальність всіма способами. У конкурентній e-commerce середовищі досить оригінальних ідей, креативу і оформлювальних тенденцій. Перед тим як урізноманітнити футер Е-комерційного сайту, варто врахувати важливі моменти. Що розмістити першу чергу і як це краще зробити? В огляді надихаючих дизайнів футера є цікаві варіанти.
Читайте також: 13 маркетингових трендів в електронній комерції 2019 року
Цікава статистика від компанії Chartbeat. Дослідження поведінки 25 млн. Користувачів показало, наскільки глибоко вони переглядають сторінки. Виявляється, призначене для користувача увага звернена на простір нижче лінії згину. Отримуючи більше практично корисної інформації, відвідувачі найдовше затримуються в області 1200px від верху сторінки (при середніх 700px по вертикалі екрана в браузері), або за другим екраном.
Час перегляду (сек.) / Відстань від верху сторінки (пікселі)
Великий розрив по тривалості перегляду першого і другого екранів. Самий ТОП - 4 сек, тривалість досягає максимуму (16 сек.) На 1200 пікселях від верху і при подальшій прокручуванні, повільно знижується.
Частка відвідувачів (%) / Відстань від верху сторінки (пікселі)
Значна частина відвідувачів (понад 25%) навіть не чекають завантаження контенту і починають скролл сторінку. Значить, тільки 75% спершу побачать самий верх. Найбільш переглядається область сторінки, це 550px (відразу над лінією згину).
Дослідження розвіює міф про те, що користувачі не прокручують сторінку до самого низу і не дивляться весь контент. Футер також важливий для сучасного eCommerce сайту, навіть має свої переваги.
Ідеї як оформити «підвал» (футер), приклади продають дизайнів
Ці 10 порад підкажуть, як красиво оформити футер для сайту - за правилами композиції в веб-дизайні і з дозволом пріоритетних завдань. Застосуйте найбільш підходящі тактики для поліпшення юзабіліті, UX (користувацького досвіду) і навіть підвищення продажів.
1. Необхідна інформація
Традиційно, в футере сайту висвітлюються необхідні організаційно-правові питання. Повідомлення оформляються менш помітним текстом, що звільняє інші області сторінок для більш значущих елементів. Ось приблизний список для розгляду:
- Відмітки про копірайт
- правові застереження
- біллінгова інформація
- Повідомлення про використання файлів cookie
Веб-сайту який реалізує товар, потрібно задовольняти вимогам законодавства та надавати інформацію про порядок, строки повернення. Розташування її в футере, зручно як продає ресурсу, так і відвідувачам.
Приклад footer'a: Ів Роше
Інтернет-магазин торгової марки Ів Роше: футер на весь екран з приємним дизайном з чергуються шарів. Інформує про компанію, інфраструктурі продає сайту - від відстеження замовлення, до політики персональних даних. Тут же поради по використанню продукту, бонуси, акції
Приклад footer'a: Lumity
На торговців харчовими добавками покладається підвищена юр. відповідальність. Є чимало речей про які вони повинні / не повинні сказати на своєму продає сайті. Посилання на правову інформацію виділені жирним для кращої помітності.
Футер з красивим бекграунд зображенням дуже органічно вписується в загальний дизайн сайту. Немає чіткої межі, швидше за роздільником служить сам контент
Приклад footer'a: Saddleback Leather Co
Продає сайт з красивим ретро-дизайном шапки і футера. 100-річна гарантія на відсутність дефектів матеріалу та оздоблення. Умови повернення супроводжуються цікавими історіями ... не все так сумно з необхідною e-Commerce-інформацією буває, виявляється
2. Негативний простір - достатність візуальної дистанції
Обмежуючи число футерних лінків не поскупилася на негативне простір - це надасть приголомшливий ефект на візуальне сприйняття і поліпшить читаність. Загальне правило: при дотриманні візуальної ієрархії, центральні елементи помічаються швидше (можна використовувати з вигодою!).
Приклад footer'a: QUAY AUSTRALIA
З мінімалістичним стилем і фіксованим випадаючому меню, інтернет-магазин може собі дозволити просторий футер
Приклад footer'a: Incase
Про великій кількостімікро-негативного простору (між дрібними елементами) можна сказати так: поки вся необхідна інформація присутня, вона розбірлива і швидко сприймаються - все нормально
Приклад footer'a: Stumptown Coffee Roasters
Просторий футер кавового сайту - відмінне завершення композиції чистого дизайну, в якому багато макро-негативного простору ( «повітря» між розділами / секціями)
3. Завершальний заклик до дії
Читайте також: 30+ прикладів та ідей оформлення кнопок цільового дії
Стильне оформлення футера красномовно говорить про самому ресурсі. Важливо зауважити: покупець затримується тут трохи довше, ніж в інших частинах сторінки. Зручним випадок для ще одного, завершального призову до дії. Часто це підписка / розсилка, але можна зв'язати СТА-заклик і з реєстрацією аккаунта.
Приклад footer'a: Greetabl
У Greetabl скромно оформлена нижня частина сторінок, включає заклик до підписки. При мінімумі елементів заклик стає помітним, а гармонируя з бірюзовим фоном перетворюється в прикрасу сайту
Приклад footer'a: Ecwid
Приємне оформлення із закликами до дії в нижній частині сторінок. Структура конструктора продають сайтів універсальна. Для мільйона своїх клієнтів він переведений на 35 мов
4. Плаваюча кошик - підвищення доступності продає функціоналу
Доступ до кошика із нижньої частини сайту - відмінний спосібполіпшити юзабіліті і продають якості сайту.
Приклад footer'a: Lemonadela
Продає сайт кейтеринговій компанії приємний на вид і зручний для покупця
5. Навігація в футере
Нижня частина сайту ідеально підходить для не часто переглядається інформації: про компанію, умови надання послуг і політики конфіденційності. У цьому випадку функція футера - всіх врятувати. Відчуваючи себе втраченим в eCommerce середовищі, хтось починає цікавитися інфраструктурою електронного магазину, інстинктивно прокручуючи далі ...
Негативний простір необхідно для читабельності контенту. Взагалі, «підвал» не для навігаційних цілей, на відміну від меню або карти сайту. Лише в рідкісних випадках, сайти електронної комерції розміщують в футере окремі категорії товарів (
Пам'ятається мені, в той момент, коли я став переходити з таблиць на верстку дивами, однією з проблем, з якими я зіткнувся, була наступна - як притиснути підвал сайту (footer) в самий низ вікна браузера, Щоб сторінка при цьому виглядала витягнутої на всю висоту, незалежно від обсягу тексту, а при висоті сторінки, більшою, ніж висота вікна браузера (при появі скролла), футер залишався б на призначеному йому місці.
Якщо за допомогою таблиць ця задача вирішується лише за рахунок вказівки висоти для таблиці і / або вкладеної в неї осередку, то при використанні CSS в блокової верстці застосовується зовсім інший підхід.
У процесі практики я виділив для себе 5 способів притискання футера до низу вікна браузера за допомогою CSS.
HTML-код всіх представлених способів має наступну структуру (відмінність лише в CSS-коді):
В 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.
П'ятий спосіб (найактуальніший)
це кращий спосібз усіх представлених, однак працює він тільки в сучасних браузерах. Як і в третьому способі, висота футера значення не має.
* (Margin: 0; padding: 0;) html, body (height: 100%;) .wrapper (display: flex; flex-direction: column; min-height: 100%;) .content (flex: 1 0 auto ;) .footer (flex: 0 0 auto;)
Дізнатися про підтримку браузерами властивості flex можна.
