標題重寫為：在行動瀏覽器中，CSS3的100vh值並非固定不變的

Question

我有一個很奇怪的問題...在我遇到的每個瀏覽器和行動版本中，都出現了這種行為：

• 載入頁面時，所有瀏覽器都有一個頂部選單（例如顯示網址列），當你開始捲動頁面時，它會向上滑動。
• 有時，100vh只在視口的可見部分上計算，所以當瀏覽器欄向上滑動時，100vh會增加（以像素為單位）
• 所有佈局都會重新繪製和重新調整，因為尺寸已經改變
• 對使用者體驗來說，效果不好

如何避免這個問題？當我第一次聽到視窗高度時，我很興奮，我以為我可以用它來代替使用JavaScript來設定固定高度的區塊，但現在我認為唯一的方法實際上是使用JavaScript和一些調整大小的事件...

你可以在這裡看到問題：範例網站

有人可以幫我解決/提供CSS解決方案嗎？

---

簡單的測試程式碼：

/* 可能我可以追蹤問題發生的時候... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if ( resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  這是一個應該保持高度不變的盒子...
  使用min-height允許內容超過視口的高度，如果文字太多
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  這個div的高度應該是視口的100％，並在滾動頁面時保持這個高度
    <br>
    <!-- 如果調整大小事件被觸發，這個輸入框會高亮顯示 -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  這個div的高度應該是視口的100％，並在滾動頁面時保持這個高度
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

你可以嘗試在你的css中使用min-height: -webkit-fill-available;而不是100vh。這應該可以解決問題

Answer 2

不幸的是，這是故意的...

這是一個眾所周知的問題（至少在Safari行動版中），這是故意的，因為它可以防止其他問題。 Benjamin Poulain回覆了一個webkit bug：

Nicolas Hoizey對此進行了相當多的研究：https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the -document-in-some-mobile-browsers.html

#沒有計畫修復

#目前，除了在行動裝置上避免使用視窗高度之外，你沒有太多可以做的。 Chrome在2016年也進行了更改：

• https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
• https://developers.google.com/web/updates/2016/12/url-bar-resizing