Height screen height css: How can an html element fill out 100% of the remaining screen height, using css only?

Содержание

Высота экрана Свойство

❮ Предыдущий ❮ Справочник по экранным объектам Далее ❯

Пример

Получите общую высоту экрана:

let height = screen.height;

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство height возвращает общую высоту экрана пользователя.

Свойство height возвращает высоту в пикселях.

Свойство height доступно только для чтения.

Примечание

Используйте свойство ширины, чтобы получить общую ширину экрана пользователя.

Синтаксис

screen.height

Возвращаемое значение

Тип	Описание
Число	Общая высота экрана пользователя в пикселях.

Другие примеры

Все свойства экрана:

let text = «Общая ширина/высота: » + screen. width + «*» + screen.height + «
» +
«Доступная ширина/высота: » + screen.availWidth + «*» + screen.availHeight + «
» +
«Глубина цвета: » + screen.colorDepth + «
» +
«Цветовое разрешение: » + screen.pixelDepth;

Попробуйте сами »

Поддержка браузеров

screen.height поддерживается во всех браузерах:


Хром	Край	Фаерфокс	Сафари	Опера	ИЭ
Да	Да	Да	Да	Да	Да

Связанные страницы

Свойство screen.availHeight

Свойство screen.availWidth

Свойство screen.height

Свойство screen.

width

❮ Назад ❮ Справочник по экранным объектам Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

3 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Как присвоить тегу div 100% высоты окна браузера с помощью CSS

Улучшить статью

Сохранить статью

Уровень сложности: Базовый
Последнее обновление: 17 авг, 2022

Читать

Обсудить

Улучшить статью

Сохранить статью

CSS позволяет регулировать высоту элемента с помощью свойства height. Хотя есть несколько единиц для указания высоты элемента. vh — это относительная единица, которая обычно используется.

вх: Обозначает высоту окна просмотра. Область просмотра относится к размеру окна браузера. Таким образом, при использовании vh в качестве единицы высота элемента регулируется относительно высоты окна браузера (окна просмотра).

vw: Это означает ширину области просмотра. Он используется для установки ширины браузера на 100% относительно ширины окна браузера (окна просмотра).

Синтаксис: Чтобы установить высоту элемента div на 100% от окна браузера, можно просто использовать следующее свойство CSS:

 высота:100вх;

Example:

< html >

< head >

< title >Сделать div равным 100% высоты title >

< стиль >

#geeks {

высота: 100vh;

ширина: 100vw;

размер шрифта: 20 пикселей;

                 семейство шрифтов: Times; 
                 padding-top: 250 пикселей; 
                 поле: 0 пикселей; 
                 цвет фона: зеленый; 
                 text-align: center; 
                 цвет: белый; 
   } 
    . GFG {
    Font-Size: 40px; 
                 вес шрифта: полужирный; 
  
             } 
           style   > 
    head   > 
  <   body   > 
         <   div   id   =   "Гики"  > 
    <  DIV   Класс   =   "GFG"  > Geeksforge Diveks    > GEEKSFORGEGEGEGEGEIKS    > GEEKSFORGEGEGEGEGEGEGEIKES  " > GEEKSFORGEGEIK0019  > 
           
    <   div   >A computer science portal for geeks  div   > 
           div   > 
    Body  > 
    HTML  >

Выход: