[CSS]height:100vh で要素の高さを100%にする方法
スポンサード
「vh」は「viewport height」の略で、viewport の高さ(ブラウザの高さ)に対する割合を指定することが可能です。
※vhの他にもvw(viewport width)などもありますが、今回は省略します。
Andorid のバージョン対応がネックになる場合もありますが、スマホ対応のレスポンシブWEBデザインにおいて、OSの違いやバージョンの違い、端末の縦横方向の違いなどで要素をうまく配置できない時などに、この「vh」が結構役立ちます。
要素の高さを100%にするスタイル「100vh」のデモ
スポンサード
以前に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」のデモ
スポンサード
コメント