見出し画像

CSSで画面の高さ100%の指定方法

ローディング画面の縦中央にロゴを表示するレイアウトをコーディングし、
iPhone Safariで表示しました。

画像2

何故か下にズレる・・・。

画面の高さ100%ってどういう風に指定する?

上記のレイアウトを組んだ時のHTMLとSASSです。

<div class="keyvisual">
   <div class="keyvisual__logo">
       <img src="img/pc/logo.png" alt="signal">
   </div>
</div>
.keyvisual {
   position: relative;
   width: 100%;
   height: 100vh;
   display: flex;
   align-content: center;
   align-items: center;
   justify-content: center;
   &__logo {
       padding: 10px;
       background-color: #fff;
   }
}

調べてみると・・・
iOS Safari、Android Chrome >= 56 では、「vh」はアドレスバーの高さを含んで計算されます。
そのため、アドレスバーの高さ分、ロゴが中央から下にズレて表示されていました。

解決策

ローディング画面なので、JavaScriptで画面の高さを計算し表示すると一瞬遅くなります。

親要素から画面の高さを引き継ぐ
html, body {
   width: 100%;
   height: 100%;
}

.keyvisual {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-content: center;
   align-items: center;
   justify-content: center;
   &__logo {
       padding: 10px;
       background-color: #fff;
   }
}

画像2

Nuxt.jsの場合

html, body, #__nuxt, #__layout, #__layout > div {
   width: 100%;
   height: 100%;
}


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

6
Japanese Web Developer / Front-End / Back-End / SIGNAL inc. / TOKYO /
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。