Как настроить div в зависимости от высоты экрана

Question

В настоящее время я разрабатываю программное обеспечение, и у меня есть небольшая проблема относительно page wrapper div указанного программного обеспечения. Теперь я хочу, чтобы отрегулировал высоту div в зависимости от высоты экрана, где он был открыт.

Я попытался использовать percentage(%) в настройке высоты, но при этом не работает, если открыт на другом компьютере, который не является тем же самым экраном.

Прошу прощения, если я не могу предоставить вам несколько фотографий, потому что у меня недостаточно репутации для прикрепления некоторых.

Любые советы приветствуются. Спасибо

Answer 1

Вы можете использовать vh.

100vh - высота экрана, вы можете изменить высоту элемента относительно высоты экрана с помощью vh.

Единица измерения vh составляет 1% от высоты видового экрана. «Viewport» == размер окна браузера == window object. Если видовое окно имеет высоту 40 см, 1vh = 0,4 см.

Demo

div { 
 
    height: 50vh; 
 
    width: 50vw; 
 
    background: yellow; 
 
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam unde soluta ex beatae reprehenderit ab repellat nostrum maxime in enim. Enim, reiciendis ducimus eligendi quam iure eius voluptatibus provident facilis?</div>

Docs

Подробнее: https://css-tricks.com/viewport-sized-typography/