私は非常に奇妙な問題を抱えています...すべてのブラウザーとモバイルバージョンでこの動作が発生しました：

• ページをロードすると、すべてのブラウザにトップメニューが表示され（たとえば、アドレスバーが表示されます）、ページのスクロールを開始すると上にスライドします。
• 100vh はビューポートの表示部分でのみ計算される場合があるため、ブラウザバーを上にスライドすると、100vhが増加します（ピクセル単位）。
• 寸法が変更されたため、すべてのレイアウトが再ペイントおよび再調整されます
• ユーザーエクスペリエンスに悪影響を与える

この問題を回避するにはどうすればよいですか？ビューポートの高さを初めて聞いたときは興奮し、JavaScriptを使用する代わりに固定高さのブロックにそれを使用できると思っていましたが、今、それを行う唯一の方法は、実際にはサイズ変更イベントを伴うJavaScriptだと思います...

あなたは問題を見ることができます：サンプルサイト

誰かがCSSソリューションで私を助ける/提案できますか？

簡単なテストコード：

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.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">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

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

残念ながらこれは意図的なものです…

これはよく知られている問題（少なくともSafariモバイルでは）であり、他の問題を防ぐために意図的なものです。Benjamin Poulainがwebkitバグに返信しました：

これは完全に意図的なものです。この効果を実現するには、かなりの作業が必要でした。:)

基本的な問題はこれです。スクロールすると、表示領域が動的に変化します。CSSビューポートの高さをそれに応じて更新する場合、スクロール中にレイアウトを更新する必要があります。それはたわごとのように見えるだけでなく、60 FPSでそれを行うことは、ほとんどのページで事実上不可能です（60 FPSはiOSのベースラインフレームレートです）。

「たわごとのように見える」部分を表示するのは難しいですが、スクロールすると、コンテンツが移動し、画面上の必要なものが連続的にシフトしていることを想像してください。

高さを動的に更新することは機能しませんでした、いくつかの選択肢がありました：iOSでビューポートユニットをドロップする、iOS 8以前のようにドキュメントサイズを一致させる、小さいビューサイズを使用する、大きいビューサイズを使用する。

私たちが持っていたデータから、より大きなビューサイズを使用することが最善の妥協案でした。ほとんどの場合、ビューポートユニットを使用するウェブサイトは見栄えが良かったです。

Nicolas Hoizeyはこれをかなり調査しました：https ://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -browsers.html

修正予定なし

この時点では、モバイルデバイスでビューポートの高さを使用しないことを除いて、実行できることはほとんどありません。2016年にChromeもこれに変更されました。

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

min-height: -webkit-fill-available;代わりにあなたのCSSで試すことができます100vh。解決する必要があります

私のアプリではそのようにします（typescriptとネストされたpostcssなので、それに応じてコードを変更します）：

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

あなたのCSSで：

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

少なくともChromeモバイルとiPadで動作します。機能しないのは、iOSのホーム画面にアプリを追加し、方向を数回変更した場合です。ズームレベルがinnerHeightの値に影響を及ぼしているため、解決策が見つかった場合、更新を投稿する可能性があります。

デモ

私がクライアントを構築する多くのサイトでは、100vhバナーを要求します。あなたが発見したように、スクロールを開始すると、モバイルでの「ジャンプ」エクスペリエンスが低下します。これは、すべてのデバイスでスムーズで一貫したエクスペリエンスを実現するために問題を解決する方法です。

まず、バナー要素のCSSを height:100vh

次に、jQueryを使用してバナー要素のピクセル単位の高さを取得し、この高さを使用してインラインスタイルを適用します。

var viewportHeight = $('.banner').outerHeight();
$('.banner').css({ height: viewportHeight });

これを実行すると、ページが読み込まれるときにバナー要素が100vhに設定され、CSSを使用してバナー要素にインラインCSSが配置されるため、jQueryはこれを上書きし、ユーザーがスクロールを開始したときにサイズ変更を停止します。

ただし、デスクトップでは、ユーザーがブラウザーウィンドウのサイズを変更すると、バナー要素はサイズ変更されません。これは、上記のjQueryにより、ピクセル単位で高さが固定されているためです。これに対処するには、モバイル検出を使用して「モバイル」クラスをドキュメントの本文に追加します。次に、上記のjQueryをifステートメントでラップします。

if ($('body').hasClass('mobile')) {
  var viewportHeight = $('.banner').outerHeight();
  $('.banner').css({ height: viewportHeight });
}

その結果、ユーザーがモバイルデバイスを使用している場合は、ページの本文にクラス「mobile」が存在し、上記のjQueryが実行されます。したがって、私のバナー要素は、モバイルデバイスに適用されるインラインCSSのみを取得しますが、デスクトップでは、元の100vh CSSルールがそのまま残ります。

この答えを見てください：https : //css-tricks.com/the-trick-to-viewport-units-on-mobile/

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>

Reactコンポーネントを思いつきました。React を使用しているかどうかを確認し、使用していない場合はソースコードを参照して、環境に適応できるようにしてください。

フルスクリーンdivの高さをに設定し、window.innerHeightウィンドウのサイズ変更時に更新します。

私は数日ソリューションを探していたので、VueJSをVuetifyで使用しているすべての人のための私のものです（私のソリューションはv-app-bar、v-navigation-drawerおよびv-footerを使用しています）：App.scssを作成しました（App。 vue）以下の内容で：

.v-application {
    height: 100vh;
    height: -webkit-fill-available;
}

.v-application--wrap {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
}

私にとってそのようなトリックは仕事をしました：

height: calc(100vh - calc(100vh - 100%))

@nilsが明確に説明しました。

次は何ですか？

CSSで相対的な「クラシック」%（パーセンテージ）を使用するように戻りました。

多くの場合、実装するよりも何かを実装する方が手間がかかりvhますが、少なくとも、奇妙なUIの不具合なしにさまざまなデバイスやブラウザで機能するかなり安定したソリューションがあります。

iPhoneとiPadでこの問題が発生するように設計したWebアプリを見つけたところ、特定のAppleデバイスを対象としたメディアクエリを使用してそれを解決することを提案する記事を見つけました。

その記事のコードをここで共有できるかどうかはわかりませんが、アドレスは次のとおりです：http : //webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

記事の引用：「iPhoneとiPadの古いバージョンの解像度を対象とするメディアクエリを使用して、要素の高さをデバイスの高さに合わせるだけです。」

彼らは、フルハイトの要素を適応させるためにわずか6つのメディアクエリを追加しました。CSSが完全に実装されているため、機能するはずです。

編集保留中：現在はテストできませんが、戻って結果を報告します。

私は新しいので、他の答えについてコメントすることはできません。

誰かがこの作業を行うための答えを探している場合（そして、現時点でこの作業を行うために必要と思われるため、javascriptを使用できます）、このアプローチは私にとってかなりうまくいき、モバイルの向きの変化も説明します。サンプルコードにはJqueryを使用していますが、vanillaJSで実行できるはずです。

-まず、スクリプトを使用して、デバイスがタッチしているかホバーしているかを検出します。ベアボーンの例：

if ("ontouchstart" in document.documentElement) {
    document.body.classList.add('touch-device');

} else {
    document.body.classList.add('hover-device');
}

これにより、後で高さスクリプトに使用できるデバイスの種類（ホバーまたはタッチ）に応じて、ボディ要素にクラスが追加されます。

-次に、このコードを使用して、ロード時および方向変更時のデバイスの高さを設定します。

if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
    function calcFullHeight() {
        jQuery('.hero-section').css("height", $(window).height());
    }

    (function($) {
        calcFullHeight();

        jQuery(window).on('orientationchange', function() {
            // 500ms timeout for getting the correct height after orientation change
            setTimeout(function() {
                calcFullHeight();
            }, 500);

        });
    })(jQuery);

} else {
    jQuery('.hero-section').css("height", "100vh");


}

-タイムアウトが設定されているため、デバイスは向きを変更したときに新しい高さを正しく計算します。タイムアウトがない場合、私の経験では、高さは正しくありません。500msはやり過ぎかもしれませんが、私にとってはうまくいきました。

ブラウザーがCSS 100vhをオーバーライドする場合、ホバーデバイス上の-100vhはフォールバックです。

次のコードは問題を解決しました（jQueryを使用）。

var vhHeight = $("body").height();
var chromeNavbarHeight = vhHeight - window.innerHeight;
$('body').css({ height: window.innerHeight, marginTop: chromeNavbarHeight });

そして、他の要素は%、置き換えるための単位として使用しvhます。

これが、Reactアプリで使用した回避策です。

iPhone 11 ProおよびiPhone Pro Max-120px

iPhone 8-80px

max-height: calc(100vh - 120px);

それは妥協ですが、比較的簡単な修正です

以下は私のために働きました：

html { height: 100vh; }

body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

/* this is the container you want to take the visible viewport  */
/* make sure this is top-level in body */
#your-app-container {
  height: 100%;
}

body目に見えるビューポートの高さを取るとします#your-app-containerとheight: 100%、コンテナが見えるビューポートの高さを取ることになります。

うまくいけば、これは、ここで提案されているように、UAで定義されたCSS環境変数になります。https：//github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

ので、それが固定されることはありません、あなたのような何かを行うことができます：

# html
<body>
  <div class="content">
    <!-- Your stuff here -->
  </div>
</body>

# css
.content {
  height: 80vh;
}

私にとっては、多くのデバイスやブラウザで動作しないJavaScriptを使用するよりも速くて純粋なソリューションでした。

vhニーズに合った適切な値を使用してください。

モバイルデバイスでvhを使用しても100vhでは機能しません。デバイスの高さ全体を使用する設計上の選択のため、アドレスバーなどは含まれません。

実際のビューの高さに比例したdivの高さを含むレイアウトを探している場合は、次の純粋なcssソリューションを使用します。

:root {
  --devHeight: 86vh; //*This value changes
}

.div{
    height: calc(var(--devHeight)*0.10); //change multiplier to suit required height
}

ビューポートの高さを設定するには2つのオプションがあります。手動で--devHeightを機能する高さに設定します（ただし、コーディングするデバイスのタイプごとにこの値を入力する必要があります）

または

JavaScriptを使用してウィンドウの高さを取得し、ビューポートの読み込みと更新時に--devheightを更新します（ただし、これにはJavaScriptを使用する必要があり、純粋なCSSソリューションではありません）。

正しいビューの高さを取得したら、高さを割り当てる各divの乗数を変更するだけで、ビューポート全体の高さの正確なパーセンテージで複数のdivを作成できます。

0.10 =ビューの高さの10％0.57 =ビューの高さの57％

これが誰かを助けるかもしれないことを願っています;）

これを行うには、次のスクリプトとスタイルを追加します

  function appHeight() {
    const doc = document.documentElement
    doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
  }
  window.addEventListener('resize', appHeight);
  appHeight();

スタイル

.module {
 height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

html, body { height: 100% }モバイルデバイスで100vhの効果を試してみてください。

position: fixed; top: 0; bottom: 0;コンテナにプロパティを指定してみてください。