[譯] 你知道關於視口單位的這幾件事情嗎？

時間 2020-02-13

標籤知道關於單位幾件事情简体版

原文原文鏈接

原文連接：Some Things You Oughta Know When Working with Viewport Units，by Chris Coyierjavascript

David Chanin 寫了一篇簡短的文章總結了在手機端爲元素設置 height: 100vh 帶來的一個問題。css

能夠總結爲下圖：html

咱們將 一個元素定位在了 _100vh_ 高的元素的底部。帶來的問題是，Chrome 瀏覽器沒有把地址欄考慮在內，致使地址欄顯示時，迫使底部元素超出視口以外了。

<div class="full-page-element">
  <button>Button</button>
</div>
複製代碼

.full-page-element {
  height: 100vh;
  position: relative;
}

.full-page-element button {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
複製代碼

假設 .full-page-element 是頁面裏的第一個元素，頁面也沒發生滾動。咱們指望的是看見這個按鈕是在可視區域的底部、沿着 100vh 元素的底部邊緣顯示的。可是因爲地址欄的顯示，致使這個元素超出視口以外看不見了，在 iOS Safair 和 Android Chrome 中都能看到這個效果。java

我常常會使用下段代碼：git

body {
  height: 100vh; /* 不用考慮父元素高度，直接設置就能生效 */
  margin: 0;
}
複製代碼

這是一個快速的、在不涉及任何其餘元素的狀況下，設置 body 爲全高（full height）的方式。我一般會在低風險的演示 demo 上這麼作，可是這仍是有問題的，由於隨着瀏覽器地址欄的出現和消失，頁面可能會發生跳動，或者說頁面可能不會像我想象中的那樣展現。github

你可能想到使用 body { height: 100% } 來解決問題，但這也有一個問題。body 是 <html> 的子元素，而 <html> 的高度默認是由內容撐開的。web

若是你須要設置 body 爲全高，也須要同時設置 <html> 才行：瀏覽器

html, body { 
  height: 100%;
}
複製代碼

……這並非什麼大不了的事情，它具備可靠的跨瀏覽器一致性。app

💡 譯註：post

這是做者要講的 第一個問題—— 100vh 沒有將手機端的地址欄計算在內，致使地址欄出現時，相對於 100vh 元素定位在底部的元素會由於地址欄的出現，被推出到視口以外。

這個問題的解決辦法是改用 html, body { height: 100%; } 聲明解決。

能看出來，底部邊緣的定位是很複雜的。再來看看上面 button 元素的定位代碼：

.full-page-element button {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
複製代碼

button 元素是 position: absolute 定位的，當由於父元素 .full-page-element 100vh 的設置出現問題時，那麼相對於它進行底部定位的按鈕天然也會有問題。

若是咱們有在屏幕底部定位元素的需求（好比說一個固定導航），你們可能會使用 position: fixed; bottom: 0; 來解決，這看起來沒什麼問題，瀏覽器也會按照咱們預期的工做。

💡 譯註：

這是做者要講的 第二個問題—— 屏幕底部的固定定位，應該使用 position: fixed 來實現，而不是 position: absolute 定位。

水平視口單元一樣是怪異、有問題的，Windows 系統裏的頁面 滾動條 一般會佔用可視空間，而 100vw 的計算是沒有把滾動條計算在內的。換句話說，100vw 會以一種你意想不到的方式致使水平滾動。

也就是說，視口單位（Viewport Units）並不能反映是的視口尺寸（viewport's size）。

若是頁面存在水平滾動條，那麼下面的代碼就會致使水平滾動：

.wrapper {
  width: 100vw; /* 這樣會有問題 */
}
複製代碼

爲了排除滾動條帶來的影響，減去它的寬度就能夠了。

.wrapper {
  width: calc(100vw - var(--scrollbar-width)); /* 這樣就沒有問題了 */
}
複製代碼

💡 譯註：

這是做者要講的 第三個問題—— Windows 系統中的滾動條是佔據空間的，這個會致使 width: 100vw 的設置帶來問題，若是還堅持使用此方式的話，不要忘記減去滾動條的寬度。

這個方式的具體講解，請參考《100vw 下滾動條引起的問題》這篇文章。

（完）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。