這篇“CSS中如何使用calc()獲取當(dāng)前可視屏幕高度”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對于“CSS中如何使用calc()獲取當(dāng)前可視屏幕高度”，小編整理了以下知識點(diǎn)，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括淮安網(wǎng)站建設(shè)、淮安網(wǎng)站制作、淮安網(wǎng)頁制作以及淮安網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，淮安網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到淮安省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(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的高度自動撐開到屏幕高度。而計(jì)算這個(gè)高度可以使用css3的calc()函數(shù)(參考詳細(xì)教程)：

calc() 函數(shù)用于動態(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的。

以上是“CSS中如何使用calc()獲取當(dāng)前可視屏幕高度”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：CSS中如何使用calc()獲取當(dāng)前可視屏幕高度-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://jinyejixie.com/article34/dcgose.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、微信小程序、服務(wù)器托管、企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)