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

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括淮安網(wǎng)站建設(shè)、淮安網(wǎng)站制作、淮安網(wǎng)頁制作以及淮安網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，淮安網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到淮安省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

相對長度單位指定了一個長度相對于另一個長度的屬性。對于不同的設(shè)備相對長度更適用。

em	它是描述相對于應(yīng)用在當前元素的字體尺寸，所以它也是相對長度單位。一般瀏覽器字體大小默認為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中較小的那個。
vmax	vw和vh中較大的那個。

由此可見，通過vh / vw我們可以獲得當前屏幕的視窗寬度，所以在css中，通過計算這個高度即可使得div的高度自動撐開到屏幕高度。而計算這個高度可以使用css3的calc()函數(shù)(參考詳細教程)：

calc() 函數(shù)用于動態(tài)計算長度值。

• 需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；

• 任何長度值都可以使用calc()函數(shù)進行計算；

• calc()函數(shù)支持 "+", "-", "*", "/" 運算；

• calc()函數(shù)使用標準的數(shù)學運算優(yōu)先級規(guī)則；

所以，只需設(shè)置div的高度height為calc(100vh)即可,100vh = 視窗高度的100%，例子：

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

需要注意的是，該方法適合于網(wǎng)頁高度等于當前屏幕視窗高度，按實際需求可能還是需要JS的。

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

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

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

廣告

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