CSS使用calc()獲取當(dāng)前可視屏幕高度的實(shí)現(xiàn)
發(fā)布時(shí)間：2020-07-14 16:32:51 作者：Leo.H.J 
我要評論
我要評論這篇文章主要介紹了CSS使用calc()獲取當(dāng)前可視屏幕高度的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
先了解一下CSS3的相對長度單位(參考詳細(xì)教程) ：
相對長度單位指定了一個(gè)長度相對于另一個(gè)長度的屬性。對于不同的設(shè)備相對長度更適用。
| em | 它是描述相對于應(yīng)用在當(dāng)前元素的字體尺寸，所以它也是相對長度單位。一般瀏覽器字體大小默認(rèn)為16px，則2em == 32px； |
| ex | 依賴于英文字母小 x 的高度 |
| ch | 數(shù)字 0 的寬度 |
| rem | 根元素（html）的 font-size |
| vw | viewpoint width，視窗寬度，1vw=視窗寬度的1% |
| vh | viewpoint height，視窗高度，1vh=視窗高度的1% |
| vmin | vw和vh中較小的那個(gè)。 |
| vmax | vw和vh中較大的那個(gè)。 |
由此可見，通過vh / vw 我們可以獲得當(dāng)前屏幕的視窗寬度，所以在css中，通過計(jì)算這個(gè)高度即可使得div的高度自動(dòng)撐開到屏幕高度。而計(jì)算這個(gè)高度可以使用css3的calc()函數(shù)(參考詳細(xì)教程)：
calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長度值。
- 需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100% - 10px)；
- 任何長度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；
- calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；
- calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級規(guī)則；
所以，只需設(shè)置div的高度height為calc(100vh)即可,100vh = 視窗高度的100%，例子：
div {
width: 100%;
height: calc(100vh);
}
需要注意的是，該方法適合于網(wǎng)頁高度等于當(dāng)前屏幕視窗高度，按實(shí)際需求可能還是需要JS的。
到此這篇關(guān)于CSS使用calc()獲取當(dāng)前可視屏幕高度的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)CSS使用calc()獲取當(dāng)前屏幕高度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css中的計(jì)算函數(shù)calc在網(wǎng)站布局中一個(gè)示例
這篇文章主要介紹了css中的計(jì)算函數(shù)calc在網(wǎng)站布局中一個(gè)示例的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下2019-08-12- 大家都知道Calc方法有個(gè)很大的好處就是用在流體布局上，可以通過calc()計(jì)算得到元素的寬度，本文通過一個(gè)例子給大家詳細(xì)介紹，需要的朋友參考下吧2021-06-03
深入理解CSS中的數(shù)學(xué)表達(dá)式calc()
數(shù)學(xué)表達(dá)式calc()是CSS中的函數(shù)，主要用于數(shù)學(xué)運(yùn)算。這篇文章給大家介紹了CSS中的數(shù)學(xué)表達(dá)式calc()的相關(guān)知識，感興趣的朋友一起看看吧2020-01-19- 這篇文章主要介紹了淺析CSS中calc()的使用的相關(guān)資料,需要的朋友可以參考下2016-05-10
- CSS3新增的函數(shù)中有一個(gè)非常好用的函數(shù)，就是calc()函數(shù)，用過的都說好，這篇文章我們來嘮一老calc函數(shù)，感興趣的朋友一起看看吧2022-06-23
