
Photo by
yop
CSSで画面の高さ100%の指定方法
9
ローディング画面の縦中央にロゴを表示するレイアウトをコーディングし、
iPhone Safariで表示しました。
何故か下にズレる・・・。
画面の高さ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;
}
}
Nuxt.jsの場合
html, body, #__nuxt, #__layout, #__layout > div {
width: 100%;
height: 100%;
}
この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
気軽にクリエイターの支援と、記事のオススメができます!
9
Japanese Web Developer / Front-End / Back-End / SIGNAL inc. / TOKYO /