目次
iPhoneブラウザのアドレスバーにドロワーの内容が被ってしまう原因
私はドロワーの高さに「height: 100vh」を設定していたときに、このようなことが起きました。
「100vh」は「アドレスバーも含めた高さ」だからです。
よって、ドロワーの高さに「height: 100vh;」を設定すると、ドロワーの下の方がアドレスバーに隠れてしまいます。
（アドレスバーを上に表示する設定にしている場合は、上の方がアドレスバーで隠れてしまいます。）
高さに「100dvh」を設定してみよう！
そこで、ドロワーの高さに「height: 100dvh;」を設定してみましょう！
height: 100vh; // dvhに対応していないブラウザ用
height: 100dvh; // dvhに対応しているブラウザ用dvhに対応していないブラウザのために「height: 100vh;」も設定しておきましょう！
設定する順番は「height: 100vh;」「height: 100dvh;」の順です。
（後に定義した方が優先度が高くなるため）
これで「height: 100vh;」の設定だけだと見えなかったコンテンツが見えるようになります！
dvhの対応状況
2023/10/23時点の対応状況は以下のとおりです。
試してみてね！
