常規(guī)開發(fā)種經(jīng)常會(huì)碰到如上界面，我們希望它背景色全屏保持一致抓韩。
當(dāng)然纠永，從界面上來(lái)看，它這個(gè)效果圖只是因?yàn)楦溉萜魑催_(dá)到滿屏導(dǎo)致底下留空白區(qū)域谒拴。
現(xiàn)在腦海過(guò)一下你能想到哪幾個(gè)尝江？
記不起來(lái)沒(méi)關(guān)系，花2分鐘時(shí)間簡(jiǎn)單過(guò)一下英上。
postion 定位法
看到小標(biāo)題應(yīng)該知道我要 say 什么了吧
<body> <div class="container"></div></body>
.container{ position:absolute; bottom:0; top:0; left:0; right:0; }
這下子再也不用考慮html,body高度了炭序，看著也挺好，會(huì)心一笑
JS 動(dòng)態(tài)獲取法
javascript 無(wú)所不能苍日，同樣可以解決此問(wèn)題
<script type="text/javascript"> let screenH=document &&document.documentElement &&document.documentElement.clientHeight || window.innerHeight; document.querySelector('body').style.height=screenHeight+"px";</script>
100%全屏法
發(fā)現(xiàn)不少前端友人用此法時(shí)惭聂，常常是如此
body{ height:100%;}
結(jié)果發(fā)現(xiàn)依然是 0，然后陷入了無(wú)限的疑問(wèn)中...
因?yàn)?CSS 里部分屬性是繼承父級(jí)而來(lái)的相恃，height就是其中之一辜纲，當(dāng)前html標(biāo)簽height為0，自然而然body100%也為0拦耐。
html,body{ height:100%;}
所以設(shè)置的時(shí)候別忘記把“老子”帶上耕腾。 講到講到 CSS 屬性繼承了，擴(kuò)展溫習(xí)下：
- CSS 哪些屬性可以被繼承杀糯？哪些不能夠被繼承?
fill-available 方式
html,body{ height:-webkit-fill-available; height:fill-available;}
看到這里扫俺，有的同學(xué)可能就會(huì)好奇 fill-available 和100%設(shè)置有什么區(qū)別？
下面演示一波：
html,body{ height:100%, padding:20px;}body{ height:-webkit-fill-available; height:fill-available; padding:20px;}
設(shè)置 100%的同時(shí)設(shè)置了 padding 撐破了外層容器固翰，而fill-available沒(méi)有牵舵，保持我們預(yù)想的高度。
fill-available是智能計(jì)算剩下可用空間倦挂，如果沒(méi)有padding/margin等其它屬性干擾，等同于 100%担巩，但若有屬性干擾方援，那就會(huì)智能計(jì)算。在 width涛癌、height 中均適用
講到這里犯戏，拓展一個(gè)問(wèn)題
- fill-available、max-content拳话、min-content先匪、fit-conten這四個(gè)自適應(yīng)關(guān)鍵字都什么作用?不妨了解一下
vh 定義法
vh:css3 新單位，view height 的簡(jiǎn)寫弃衍，是指可視窗口的高度,1vh=視窗高度的 1%;
既然講到 CSS 單位了呀非，麻煩各位再腦補(bǔ)下這個(gè)問(wèn)題：
- CSS 單位都有哪些？各自有什么區(qū)別？
vh 單位定義為視窗高度的百分比岸裙，那豈不是 esay猖败？
body{ height:100vh;}
搞定，大功告成降允！
這里擴(kuò)展了解下 vh 在移動(dòng)端設(shè)備上的部分“特性”
我們依然設(shè)置 body 100vh 的情況下恩闻，分別打開微信內(nèi)置瀏覽器、Safari 瀏覽器剧董、Google 瀏覽器
從效果圖不難看出幢尚，在 Safari 瀏覽器、Google 瀏覽器中 100vh 這個(gè)方案都是不完美的翅楼，都出現(xiàn)了滾動(dòng)條尉剩，并不能達(dá)到我們預(yù)期的可視區(qū)域的滿屏高度。
作為一個(gè) cv 高手犁嗅，借助搜索引擎我們了解到边涕，Safari 把網(wǎng)址欄與工具欄算進(jìn)了 100vh 中，是第一個(gè)通過(guò)選擇根據(jù)屏幕的最大高度為 vh 定義固定值來(lái)更新其實(shí)現(xiàn)的移動(dòng)瀏覽器之一褂微，而后 Google 瀏覽器也效仿它功蜓。才產(chǎn)生了我們此時(shí)所看到的效果圖。
為什么會(huì)是這樣的呢宠蚂，Apple 官方開發(fā)人員回應(yīng)說(shuō)"that it wasn’t a bug, it’s a feature."
原來(lái)式撼，這是別具匠心的藝術(shù)品。滾動(dòng)時(shí)可見區(qū)域會(huì)動(dòng)態(tài)變化求厕，如果我們相應(yīng)地更新 CSS 視口高度著隆，則需要在滾動(dòng)過(guò)程中更新布局。為了達(dá)到更好的用戶體驗(yàn)呀癣，使用較大的視圖尺寸是最好的折衷方案美浦。
通過(guò) CSS 變量來(lái)設(shè)置
JavaScript 是萬(wàn)能的，我們可以通過(guò) JS 獲取處理存儲(chǔ)于 CSS 變量中并應(yīng)用它项栏。
body{ height:100vh; height:calc(var(--vh,1vh)*100); }
提供備用屬性浦辨，像這樣就 OK 了，接下來(lái)我們來(lái)設(shè)置自定義變量
//獲取視口高度 *0.01獲取vh單位值let vh=(document &&document.documentElement &&document.documentElement.clientHeight) || window.innerHeight)*0.01; //document中設(shè)置自定義CSS屬性變量document.documentElement.style.setProperty('--vh', `${vh}px`);
這樣就成功在:root 中創(chuàng)建了--vh的 css 變量
為了防止旋轉(zhuǎn)屏幕功能的使用沼沈，我們需要監(jiān)聽窗口調(diào)整大小事件來(lái)更新我們創(chuàng)建的--vh 值
window.addEventListener("resize",()=>{ let vh=(document &&document.documentElement &&document.documentElement.clientHeight) || window.innerHeight)*0.01; document.documentElement.style.setProperty('--vh', `${vh}px`);})
參考：
