常規(guī)開發(fā)種經(jīng)常會(huì)碰到如上界面，我們希望它背景色全屏保持一致。
當(dāng)然，從界面上來看，它這個(gè)效果圖只是因?yàn)楦溉萜魑催_(dá)到滿屏導(dǎo)致底下留空白區(qū)域。
現(xiàn)在腦海過一下你能想到哪幾個(gè)？
記不起來沒關(guān)系，花2分鐘時(shí)間簡(jiǎn)單過一下。
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 無所不能，同樣可以解決此問題
<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，然后陷入了無限的疑問中...
因?yàn)?CSS 里部分屬性是繼承父級(jí)而來的，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沒有，保持我們預(yù)想的高度。
fill-available是智能計(jì)算剩下可用空間，如果沒有padding/margin等其它屬性干擾，等同于 100%，但若有屬性干擾，那就會(huì)智能計(jì)算。在 width、height 中均適用
講到這里，拓展一個(gè)問題
- 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è)問題：
- 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è)通過選擇根據(jù)屏幕的最大高度為 vh 定義固定值來更新其實(shí)現(xiàn)的移動(dòng)瀏覽器之一，而后 Google 瀏覽器也效仿它。才產(chǎn)生了我們此時(shí)所看到的效果圖。
為什么會(huì)是這樣的呢，Apple 官方開發(fā)人員回應(yīng)說"that it wasn’t a bug, it’s a feature."
原來，這是別具匠心的藝術(shù)品。滾動(dòng)時(shí)可見區(qū)域會(huì)動(dòng)態(tài)變化，如果我們相應(yīng)地更新 CSS 視口高度，則需要在滾動(dòng)過程中更新布局。為了達(dá)到更好的用戶體驗(yàn)，使用較大的視圖尺寸是最好的折衷方案。
通過 CSS 變量來設(shè)置
JavaScript 是萬能的，我們可以通過 JS 獲取處理存儲(chǔ)于 CSS 變量中并應(yīng)用它。
body{ height:100vh; height:calc(var(--vh,1vh)*100); }
提供備用屬性，像這樣就 OK 了，接下來我們來設(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)整大小事件來更新我們創(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`);})
參考：
