Як за допомогою CSS встановити висоту елемента HTML на 100%

Дізнайтеся, як налаштування висоти з відсотками працює в CSS

Значення відсотків у CSS може бути складним. Якщо ви встановите властивість висоти CSS елемента на 100%, що саме ви встановлюєте його на 100%? Це головне питання, з яким ви стикаєтесь при роботі з відсотками в CSS, і в міру того, як макети стають складнішими, стає набагато складніше відстежувати відсотки, що призводить до відверто химерної поведінки, якщо ви не обережні.

Робота з відсотками має виразну перевагу; Процентні макети автоматично адаптуються до різних розмірів екрана. Ось чому використання відсотків має важливе значення в адаптивному дизайні. Популярні сітчасті системи та рамки CSS використовують відсоткові значення для створення своїх адаптивних сіток.

Зрозуміло, що існують певні ситуації, які краще підходять до статичних значень, та інші, які працюють набагато краще з чимось адаптивним, наприклад відсотком. Вам потрібно буде визначити, який маршрут пройти з елементами вашого дизайну.

Статичні одиниці

Пікселі статичні. Десять пікселів на одному пристрої - це десять пікселів на кожному пристрої. Звичайно, є такі речі, як щільність, і таким чином пристрій насправді інтерпретує, що таке піксель, але великих змін ви ніколи не побачите, оскільки екран має різний розмір.

За допомогою CSS ви можете легко визначити висоту елемента в пікселях, і він залишиться колишнім. Це передбачувано.

div {
висота: 20px;
}

Це не зміниться, якщо ви не зміните його за допомогою JavaScript або чогось подібного.

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

Встановлення висоти елемента до 100%

Коли ви встановлюєте висоту елемента на 100%, чи поширюється він на всю висоту екрана? Іноді. CSS завжди трактує значення відсотків як відсоток від батьківського елемента.

Без батьківського елемента

Якщо ви створили свіжий що міститься лише в тезі тіла на вашому сайті, 100%, ймовірно, буде дорівнювати висоті екрана. Тобто, якщо ви не визначили значення висоти для .

HTML:




CSS:

div {
висота: 100%;
}

Це Висота елемента буде дорівнює екрану. За замовчуванням охоплює весь екран, так що це основа, яку ваш браузер використовує для розрахунку висоти елемента.

З батьківським елементом зі статичною висотою

Коли ваш елемент вкладений всередині іншого елемента, браузер використовує висоту батьківського елемента для обчислення значення на 100%. Отже, якщо ваш елемент знаходиться всередині іншого елемента, який має висоту 100 пікселів, і ви встановлюєте висоту дочірнього елемента на 100%. Дочірній елемент буде висотою 100 пікселів.

HTML:






CSS:

#parent {
висота: 100px;
}
#child {
висота: 100%;
}

Висота, доступна для дочірнього елемента, обмежується висотою батьківського.

З батьківським елементом з відсотковою висотою

Це може здатися контрінтуїтивним, але ви можете встановити висоту елемента у відсотках відсотків. Якщо в елементі є батьківський елемент, який також має свою висоту, визначену у відсотках, браузер буде використовувати те саме значення, що і батьківський, яке він вже розраховував на основі свого батьківського. Це тому, що 100% вартості все ще є цією цінністю.






CSS:

#parent {
висота: 75%;
}
#child {
висота: 100%;
}

У цьому випадку висота батьківського елемента становить 75% усього екрана. Отже, дитина теж становить 100% від загального наявного росту.

З батьківським елементом без висоти

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

HTML:






CSS:

#parent {}
#child {
висота: 100%;
}

Дочірній елемент поширюється вгору вгорі і внизу екрана.

Одиниці перегляду

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

Щоб встановити висоту елемента, рівну висоті екрана, встановіть його значення висоти 100vh .

div {
висота: 100vh;
}

Виконуючи це, ви можете легко розбити макет, і вам потрібно буде знати про те, які інші елементи будуть впливати, але область перегляду - це самий прямий спосіб встановити висоту елемента на 100% екрана.