[前端]GOFLY在線客服-使用vh、vw使div元素充滿屏幕-GO語言實現開源獨立部署客服系統

當進行佈局的時候，有時候需要div元素根據屏幕的寬度和高度進行自適應，而不是根據內容

除了使用js方法之外，還可以使用css3的新單位   vh   wh

 

1vh=視窗高度的1%，height: 100vh;就是屏幕高度的100%

1vw=視窗寬度的1%，width: 100vw;就是屏幕寬度的100%

 

vw、vh 與 % 百分比的區別

（1）% 是相對於父元素的大小設定的比率，vw、vh 是視窗大小決定的。

（2）vw、vh 優勢在於能夠直接獲取高度，而用 % 在沒有設置 body 高度的情況下，是無法正確獲得可視區域的高度的。

 

        *{
            padding: 0;
            margin: 0;
        }
        .content{
            width: 100vw;
            height: 100vh;
            background: #1c7430;
        }

 

1vh=視窗高度的1%，height: 100vh;就是屏幕高度的100%