【CSS3】height:100vh で背景が切れてしまう問題について

こんにちは、デザイナーの野田沢です 。

ブラウザの高さに対する割合を指定することが可能な「vw、vh」。

とっても便利ですよね。

私も多用します。

私はよく height:100vh で背景に画像を敷いて使用することが多いのですが、スクロールで背景の画像が切れてしまうのです。もしかしたら、height:100vh に限ったことではないのかもしれませんが、今回はちょっとニッチなこの問題について解決したいと思います。

メインとなる背景のcssはこんな感じ。

main { 
	position:relative;
	width:100vw;
	height:100vh;
	background: url(bg.jpg) 50% 50% no-repeat;
	background-size:cover;
}

もちろん最初はキレイに見えています。
しかし、ブラウザを小さくしてスクロールしてみると…

背景の画像が切れてしまうのです。

解決方法

ズバリ、めっちゃ簡単です。「height:100vh」を「min-height:100vh」にするだけ！

この通り、スクロールしても背景画像はしっかり表示されています。

flexboxとの関係性

ここで1つ注意。上記で紹介している画像は、height:100vhを使用した画像の上にflexboxでコンテンツを入れているのですが、
min-height:100vhに変更することで、align-items: center が機能しなくなります…。

こんな感じで、align-items: flex-startになってしまいますので、flexboxと併用する場合は注意してください。