彈指間，重溫幾個設置滿屏的小技巧

時間 2020-04-15

標籤彈指重溫幾個設置滿屏技巧简体版

原文原文鏈接

首先，上素材： javascript

常規開發種常常會碰到如上界面，咱們但願它背景色全屏保持一致。css

固然，從界面上來看，它這個效果圖只是由於父容器未達到滿屏致使底下留空白區域。html

如今腦海過一下你能想到哪幾個？前端

記不起來不要緊，花2分鐘時間簡單過一下。java

postion 定位法

看到小標題應該知道我要 say 什麼了吧css3

<body>
    <div class="container"></div>
</body>
複製代碼

    .container{
        position:absolute;
        bottom:0;
        top:0;
        left:0;
        right:0;
    }
複製代碼

這下子不再用考慮html,body高度了，看着也挺好，會心一笑web

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`);
})
複製代碼