如何在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％。

因此，如果該設備是320像素，height: 100%;將是320像素 和height: 50%;將160像素;

---

記住，如果你有一個設備具有320像素與被設定爲height: 50%;一個<div>，然後將該<div>內<img>，這種嵌套圖像標籤將只具有160像素的高度，如果它被設置爲height: 100%; 。因爲它從它的父母繼承。