首先,上素材:
常規開發種經常會碰到如上界面,我們希望它背景色全屏保持一致。
當然,從界面上來看,它這個效果圖只是因爲父容器未達到滿屏導致底下留空白區域。
現在腦海過一下你能想到哪幾個?
記不起來沒關係,花2分鐘時間簡單過一下。
postion 定位法
看到小標題應該知道我要 say 什麼了吧
<body>
<div class="container"></div>
</body>
.container{
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
}
這下子再也不用考慮html,body高度了,看着也挺好,會心一笑
JS 動態獲取法
javascript 無所不能,同樣可以解決此問題
<script type="text/javascript">
let screenH=document &&document.documentElement &&document.documentElement.clientHeight || window.innerHeight;
document.querySelector('body').style.height=screenHeight+"px";
</script>
100%全屏法
發現不少前端友人用此法時,常常是如此
body{
height:100%;
}
結果發現依然是 0,然後陷入了無限的疑問中...
因爲 CSS 裏部分屬性是繼承父級而來的,height就是其中之一,當前html標籤height爲0,自然而然body100%也爲0。
html,body{
height:100%;
}
所以設置的時候別忘記把“老子”帶上。 講到講到 CSS 屬性繼承了,擴展溫習下:
-
CSS 哪些屬性可以被繼承?哪些不能夠被繼承?
fill-available 方式
html,body{
height:-webkit-fill-available;
height:fill-available;
}
看到這裏,有的同學可能就會好奇 fill-available 和**100%**設置有什麼區別?
下面演示一波:
html,body{
height:100%,
padding:20px;
}
body{
height:-webkit-fill-available;
height:fill-available;
padding:20px;
}
設置 100%的同時設置了 padding 撐破了外層容器,而fill-available沒有,保持我們預想的高度。
fill-available是智能計算剩下可用空間,如果沒有padding/margin等其它屬性干擾,等同於 100%,但若有屬性干擾,那就會智能計算。在 width、height 中均適用
講到這裏,拓展一個問題
-
fill-available、max-content、min-content、fit-conten這四個自適應關鍵字都什麼作用?不妨瞭解一下
vh 定義法
vh:css3 新單位,view height 的簡寫,是指可視窗口的高度,1vh=視窗高度的 1%;
既然講到 CSS 單位了,麻煩各位再腦補下這個問題:
-
CSS 單位都有哪些?各自有什麼區別?
vh 單位定義爲視窗高度的百分比,那豈不是 esay?
body{
height:100vh;
}
搞定,大功告成!
這裏擴展瞭解下 vh 在移動端設備上的部分“特性”
我們依然設置 body 100vh 的情況下,分別打開微信內置瀏覽器、Safari 瀏覽器、Google 瀏覽器
從效果圖不難看出,在 Safari 瀏覽器、Google 瀏覽器中 100vh 這個方案都是不完美的,都出現了滾動條,並不能達到我們預期的可視區域的滿屏高度。
作爲一個 cv 高手,藉助搜索引擎我們瞭解到,Safari 把網址欄與工具欄算進了 100vh 中,是第一個通過選擇根據屏幕的最大高度爲 vh 定義固定值來更新其實現的移動瀏覽器之一,而後 Google 瀏覽器也效仿它。才產生了我們此時所看到的效果圖。
爲什麼會是這樣的呢,Apple 官方開發人員迴應說"that it wasn’t a bug, it’s a feature."
原來,這是別具匠心的藝術品。滾動時可見區域會動態變化,如果我們相應地更新 CSS 視口高度,則需要在滾動過程中更新佈局。爲了達到更好的用戶體驗,使用較大的視圖尺寸是最好的折衷方案。
通過 CSS 變量來設置
JavaScript 是萬能的,我們可以通過 JS 獲取處理存儲於 CSS 變量中並應用它。
body{
height:100vh;
height:calc(var(--vh,1vh)*100);
}
提供備用屬性,像這樣就 OK 了,接下來我們來設置自定義變量
//獲取視口高度 *0.01獲取vh單位值
let vh=(document &&document.documentElement &&document.documentElement.clientHeight) || window.innerHeight)*0.01;
//document中設置自定義CSS屬性變量
document.documentElement.style.setProperty('--vh', `${vh}px`);
這樣就成功在:root 中創建了--vh的 css 變量
爲了防止旋轉屏幕功能的使用,我們需要監聽窗口調整大小事件來更新我們創建的--vh 值
window.addEventListener("resize",()=>{
let vh=(document &&document.documentElement &&document.documentElement.clientHeight) || window.innerHeight)*0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
})
很明顯這樣的代價還是有點大的,一旦更新--vh 的值,我們的界面將發生重繪,體驗是十分不好的,應該儘量避免此類騷操作。
參考:
http://suo.im/6xrGWg
https://css-tricks.com/
私人微信:y3517320520加我交流,備註平臺渠道
或掃碼關注公衆號發現更多前端有趣好玩的開發小技巧