Как получить высоту пользовательского устройства в html

Question

Как найти высоту пользовательского устройства для оптимизации высоты элемента?

Ниже мой CSS

section.sr { 
    margin:0; 
    padding:0; 
    background-image: url(../images/simulation-1-waterfall.jpg); 
    margin-top: 0; 
    padding: 25px 35px 30px; 
    height: 100%; 
} 

Answer 1

Вы можете использовать единицы измерения высоты и ширины видового экрана: vh и vw, при этом 100vh равен 100% высоты видового экрана.

Решение:

section.sr { 
    margin:0; 
    padding:0; 
    background-image: url(../images/simulation-1-waterfall.jpg); 
    margin-top: 0; 
    padding: 25px 35px 30px; 
    height: 100vh; 
} 

Answer 2

section.sr { 
    margin:0; 
    padding:0; 
    background-image: url(../images/simulation-1-waterfall.jpg); 
    margin-top: 0; 
    padding: 25px 35px 30px; 
    height: screen.heightpx; 
} 

Answer 3

Поместите это в голову вашего HTML:

<meta name="viewport" content="height=device-height, initial-scale=1"> 

Это позволит height: 100%; быть 100% от устройства.

Так что если устройство 320px, height: 100%; будет 320px и height: 50%; будет 160px;

---

Имейте в виду, если у вас есть устройство с 320px с <div>, который установлен в height: 50%; и затем <img> в этом <div>, этот вложенный тег изображения будет иметь только высоту 160px, если он установлен в height: 100%; , Потому что он наследует его родителя.