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

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

height:100vh

 

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

 

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

とっても便利ですよね。

私も多用します。

私はよく height:100vh で背景に画像を敷いて使用することが多いのですが、スクロールで背景の画像が切れてしまうのです。もしかしたら、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

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

 

解決方法

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

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

 

flexboxとの関係性

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

 

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

Feature

Latest

Category

Archives

Please feel free to contact us