Как задать тегу div 100% высоту окна браузера с помощью CSS
Опубликовано: 4 Февраля, 2022
CSS позволяет регулировать высоту элемента с помощью свойства height. Пока есть несколько единиц для указания высоты элемента. VH - это относительная единица, которая обычно используется.
vh: обозначает высоту области просмотра. Область просмотра относится к размеру окна браузера. Таким образом, при использовании vh в качестве единицы высота элемента регулируется относительно высоты окна браузера (области просмотра).
vw: обозначает ширину области просмотра. Он используется для установки ширины браузера на 100% относительно ширины окна браузера (области просмотра).
Синтаксис: чтобы установить высоту элемента div равной 100% окна браузера, можно просто использовать следующее свойство CSS:
высота: 100вх;
Example:
<!DOCTYPE html> <!DOCTYPE html> < html > < head > < title >Make div 100% of height</ title > < style > #geeks { height: 100vh; width: 100vw; font-size: 20px; font-family: Times; padding-top: 250px; margin: 0px; background-color: green; text-align: center; color:white; } .gfg { font-size:40px; font-weight:bold; } </ style > </ head > < body > < div id = "geeks" > < div class = "gfg" >GeeksforGeeks</ div > < div >A computer science portal for geeks</ div > </ div > </ body > </ html > |
Выход: