以前にjQueryで特定の要素の高さを100%にする方法について紹介させていただきましたが、対応ブラウザは限られるものの、CSSだけでも同じように要素の高さを100%にすることが可能です。
[JS]ウィンドウの高さを取得して要素の高さを100%にする方法jQueryでウィンドウの高さを取得して、特定の要素の高さを常に100%にする方法のご紹介です。 ウィンドウの高さを取得して高さを調整 今回は例として#container という要素の高さを100%にしてみます。 <head>タグ内で、jq...webantena.net
高さの単位「vh」
CSS で要素の高さを指定する際に「vh」という単位を使うことができます。「vh」は「viewport height」の略で、viewport の高さ（ブラウザの高さ）に対する割合を指定することが可能です。
※vhの他にもvw（viewport width）などもありますが、今回は省略します。
対応ブラウザと利用シーン
「vh」の対応ブラウザは、IE 9以上、Firerfox、Google Chrome、Safari、Operaで、スマホの場合はiOS（iOS Safari）がv6.0 から、Android（Android Browser）はv4.4 から対応しているようです。Android のバージョン対応がネックになる場合もありますが、スマホ対応のレスポンシブWEBデザインにおいて、OSの違いやバージョンの違い、端末の縦横方向の違いなどで要素をうまく配置できない時などに、この「vh」が結構役立ちます。
height: 100vhで要素の高さを100%にする
「height:1vh」は「height=1%」になるので、高さ100%にしたい要素のスタイルを以下のように指定します。|
1 2 3 |
#container { height: 100vh } |
コメント