Оригінальна публікація: HTML vs Body: How to Set Width and Height for Full Page Size
CSS складний, але на це можна закрити очі. Саме ця поблажливість дозволяє нам додавати стилі до CSS абияк.
Наша сторінка досі завантажується. Немає ніякого «краху».
Якщо мова йде про ширину та висоту сторінки, чи знаєте ви, що потрібно встановити для елемента HTML? А для елемента body?
Ви просто накидуєте стилі на обидва елементи і сподіваєтесь на краще?
Якщо так, ви не один.
Зазвичай над відповіддю навіть не задумуються.
Я визнаю свою провину в застосуванні стилів до обох елементів у минулому, не врахувавши, яку саме властивість потрібно застосувати до них. 🤦♂️
Нерідко можна побачити властивості CSS, застосовані до HTML та body, у такий спосіб:
html, body {
min-height: 100%;
}
Це важливо?
Так, важливо.
Наведене вище визначення створює проблему:
Встановлення min-height на 100% для обох елементів не дозволяє елементу body заповнювати сторінку так, як ви очікували. Якщо ви перевірите обчислені значення в інструментах, побачите, що висота елемента body дорівнює нулю.
При цьому елемент HTML має висоту, що дорівнює видимій частині сторінки в браузері.
Подивіться на наступний знімок екрана з Chrome Dev Tools:
Чому це відбувається?
Використання відсотка як значення розміру вимагає, щоб елемент посилався на батьківського елемента, щоб базувати цей відсоток на ньому.
Елемент HTML посилається на вікно перегляду, значення висоти якого дорівнює висоті видимого вікна перегляду. Однак для елемента HTML ми встановлюємо лише min-height... НЕ значення властивості висоти.
Таким чином, елемент body не має батьківського значення висоти, на яке можна посилатися під час визначення, чому дорівнюють 100%.
Проблема може бути прихованою
Якщо ви почали з достатньою кількістю вмісту для заповнення тіла сторінки, ви могли не помітити цю проблему.
Це ще важче помітити, якщо ви встановите background-color для обох елементів, або навіть лише для одного з них, і вікно перегляду буде заповнене цим кольором. Це створює враження, що елемент body такий же високий, як вікно перегляду.
Але він досі на нулі.
Зображення вище взято зі сторінки з таким CSS:
html, body {
min-height: 100%;
}
body { background-color: dodgerblue; }
Зворотне успадкування?
Дивним чином елемент HTML припускає background-color елемента body, якщо ви не встановите окремий background-color для елемента html.
Яке ідеальне налаштування висоти для повністю адаптивної сторінки?
Роками відповідь була така:
html {
height: 100%;
}
body {
min-height: 100%;
}
Це дозволяє елементу HTML посилатися на батьківське вікно перегляду та мати значення висоти, що дорівнює 100% значення вікна перегляду.
Коли елемент HTML отримує значення висоти, то значення min-height, призначене елементу body, дає йому початкову висоту, яка відповідає елементу HTML.
Це також дозволяє body рости вище, якщо вміст переростає видиму сторінку.
Єдиним недоліком є те, що елемент HTML не виростає за висоту видимого вікна перегляду. Однак дозволити елементу body переростати елемент HTML визнали прийнятним.
Сучасне спрощене рішення
body { min-height: 100vh; }
У цьому прикладі використовуються одиниці vh (viewport height; висота вікна перегляду), щоб дозволити тілу встановити мінімальне значення висоти на основі повної висоти вікна перегляду.
Подібно до обговорюваного раніше background-color, якщо ми не встановимо значення висоти для елемента HTML, він прийме те саме значення для висоти, що надано елементу body.
Тому це рішення уникає переповнення елемента HTML, присутнього в попередньому рішенні, і обидва елементи ростуть разом із вашим вмістом!
Раніше використання одиниць vh справді спричиняло деякі проблеми в мобільних браузерах, але зараз Chrome і Safari сумісні з ними.
Висота сторінки може спричинити горизонтальну смугу прокрутки
Зачекайте, що?
Хіба тут не має писати «Ширина сторінки»?
Ні.
В іншому дивному випадку висота вашої сторінки може активувати горизонтальну смугу прокрутки у вашому браузері.
Коли вміст вашої сторінки стає вищим за висоту вікна перегляду, активується вертикальна смуга прокручування праворуч. Це може призвести до того, що ваша сторінка моментально матиме ще горизонтальну смугу прокрутки.
Що з цим робити?
Ви будете спати краще, знаючи, що це починається з налаштування ширини сторінки.
Ця проблема виникає, коли будь-який елемент — а не лише елемент HTML або body — встановлено на 100vw.
Одиниці вікна перегляду не враховують приблизно 10 пікселів, які займає вертикальна смуга прокручування.
Таким чином, коли активується вертикальна смуга прокручування, ви також отримуєте горизонтальну смугу.
Як встановити сторінку на повну ширину
Можливо, просто не варто цього робити.
Якщо не встановити ширину для елементів HTML та body, то за замовчуванням буде використовуватися повний розмір екрана. Якщо ви встановили значення ширини, відмінне від auto, подумайте про скидання CSS.
Пам’ятайте, що елемент body має поле 8px з усіх боків за замовчуванням.
Скидання CSS видаляє їх. В іншому випадку встановлення ширини на 100% перед видаленням полів призведе до переповнення елемента body. Ось скидання CSS, яке я використовую:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Як встановити ширину на свій вибір
Хоча не завжди потрібно встановлювати ширину, я зазвичай це роблю.
Це може бути проста звичка.
Якщо ви встановите ширину на 100% для елемента body, ви матимете ширину повної сторінки. По суті, це еквівалентно невстановленню значення ширини та дозволу за замовчуванням.
Якщо ви хочете використовувати елемент body як менший контейнер і дозволити елементу HTML заповнити сторінку, ви можете встановити значення max-width для body.
Ось приклад:
html { background-color: #000; }
body {
min-height: 100vh;
max-width: 400px;
background-color: papayawhip;
margin: 0 auto;
}Висновок
Якщо для елемента HTML не надано значення висоти, то встановлення висоти та/або min-height елемента body на 100% призведе до відсутності висоти (перед додаванням вмісту).
Однак, якщо для елемента HTML не надано значення ширини, то встановлення ширини елемента body на 100% призведе до ширини повної сторінки.
Це може бути суперечливим і заплутаним.
Для адаптивної висоти повної сторінки встановіть min-height елемента body на 100vh.
Якщо ви встановлюєте ширину сторінки, виберіть 100% замість 100vw, щоб уникнути несподіваних горизонтальних смуг прокрутки.
Чи є у вас інший спосіб налаштування CSS ширини та висоти, якому ви віддаєте перевагу?
Поділіться своїм методом!