CSS 使用calc()獲取當(dāng)前可視屏幕高度
通過(guò)vh / vw 我們可以獲得當(dāng)前屏幕的視窗寬度，所以在css中，通過(guò)計(jì)算這個(gè)高度即可使得div的高度自動(dòng)撐開(kāi)到屏幕高度
先了解一下CSS3的相對(duì)長(zhǎng)度單位
| em | 它是描述相對(duì)于應(yīng)用在當(dāng)前元素的字體尺寸，所以它也是相對(duì)長(zhǎ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è)。 |
?
由此可見(jiàn)，通過(guò)vh / vw 我們可以獲得當(dāng)前屏幕的視窗寬度，所以在css中，通過(guò)計(jì)算這個(gè)高度即可使得div的高度自動(dòng)撐開(kāi)到屏幕高度。而計(jì)算這個(gè)高度可以使用css3的calc()函數(shù)(參考詳細(xì)教程)：
calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。
- 需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100% - 10px)；
- 任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；
- calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；
- calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；
所以，只需設(shè)置div的高度height為calc(100vh)即可,100vh = 視窗高度的100%，例子：
div {
width: 100%;
height: calc(100vh);
}
需要注意的是，該方法適合于網(wǎng)頁(yè)高度等于當(dāng)前屏幕視窗高度，按實(shí)際需求可能還是需要JS的
您可能感興趣的內(nèi)容
