• RSS

[CSS]height:100vh で要素の高さを100%にする方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

以前にjQueryで 特定の要素の高さを100%にする方法 について紹介させていただきましたが、

対応ブラウザは限られるものの、CSS だけでも同じように要素の高さを100%にすることが可能です。

高さの単位「vh」

CSS で要素の高さを指定する際に「vh」という単位を使うことができます。

vh」は「viewport height」の略で、viewport の高さ(ブラウザの高さ)に対する割合を指定することが可能です。
※vhの他にもvw(viewport width)などもありますが、今回は省略します。


対応ブラウザと利用シーン

vh」の対応ブラウザは、IE 9以上、Firerfox、Google Chrome、Safari、Operaで、スマホの場合はiOS(iOS Safari)がv6.0 から、Andorid(Android Browser)はv4.4 から対応しているようです。

Andorid のバージョン対応がネックになる場合もありますが、スマホ対応のレスポンシブWEBデザインにおいて、OSの違いやバージョンの違い、端末の縦横方向の違いなどで要素をうまく配置できない時などに、この「vh」が結構役立ちます。


height: 100vh で要素の高さを100%にする

「height:1vh」は「height=1%」になるので、高さ100%にしたい要素のスタイルを以下のように指定します。
#container {
    height: 100vh
}

要素の高さを100%にするスタイル「100vh」のデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください