CSS 使用calc()獲取當前可視屏幕高度

來自:https://blog.csdn.net/qq_32063079/article/details/89766442css

 

先了解一下CSS3的相對長度單位(參考詳細教程) :html

相對長度單位指定了一個長度相對於另外一個長度的屬性。對於不一樣的設備相對長度更適用。css3

em 它是描述相對於應用在當前元素的字體尺寸,因此它也是相對長度單位。通常瀏覽器字體大小默認爲16px,則2em == 32px;
ex 依賴於英文字母小 x 的高度
ch 數字 0 的寬度
rem 根元素(html)的 font-size
vw viewpoint width,視窗寬度,1vw=視窗寬度的1%
vh viewpoint height,視窗高度,1vh=視窗高度的1%
vmin vw和vh中較小的那個。
vmax vw和vh中較大的那個。
因而可知,經過vh / vw 咱們能夠得到當前屏幕的視窗寬度,因此在css中,經過計算這個高度便可使得div的高度自動撐開到屏幕高度。而計算這個高度能夠使用css3的calc()函數(參考詳細教程):瀏覽器

calc() 函數用於動態計算長度值。函數

須要注意的是,運算符先後都須要保留一個空格,例如:width: calc(100% - 10px);
任何長度值均可以使用calc()函數進行計算;
calc()函數支持 "+", "-", "*", "/" 運算;
calc()函數使用標準的數學運算優先級規則;
因此,只需設置div的高度height爲calc(100vh)便可,100vh = 視窗高度的100%,例子:字體

div { width: 100%; height: calc(100vh); }

 


須要注意的是,該方法適合於網頁高度等於當前屏幕視窗高度,按實際需求可能仍是須要JS的。

spa

相關文章
相關標籤/搜索