web-dev-qa-db-ja.com

アドレスバーが表示されるときの高さ100vh-Chromeモバイル

私はこの問題に何度か遭遇し、この問題の解決策があるかどうか疑問に思っていました。私の問題はChromeモバイルアプリで発生します。そこで、下にスクロールするとアドレスバーが消えます。これまでのところ、良い例を見てみましょう。
コンテナheightは100vhに設定されます。

How it looks with the address bar

ご覧のとおり、下部が切り取られています。

下にスクロールすると、次のようになります。

enter image description here

今ではよさそうだ。だから明らかにChromeはアドレスバーの高さをビューポートの高さに計算します。だから私の質問は：

アドレスバーの有無にかかわらず同じように見える方法はありますか？コンテナが膨張するのか、それとも何か？

htmlcssgoogle-chromeaddress-barmobile-chrome
12
Tobias Glaus

min-height: -webkit-fill-availableを使用してみてください。フォールバックとしてheight: 100vhの下に追加することもできます。

1
cnotethegr8

あなたはアドレスバーの問題を修正することができます。高さの設定：HTMLおよびbodyタグで100％、オフコースでマージンおよびbodyのパディングをゼロに設定し、メインdivでスクロールを制御して制御しやすくします。

1
Babak Zarrinbal

素敵な解決策を見つけました...

.page-header {
  @supports (-webkit-appearance:none) {
    .os-Android & {
      min-height: calc(100vh - 56px);
    }
  }
}

here から取得

0
Domenik Reitzner