【Labs】表示しているブラウザの高さを取得してCSSのheightに指定

こんにちは（・∀・）

今日は4年に一度の2月29日ですが、いかがお過ごしでしょうか。もうすぐオリンピックです、楽しみですね。

さて、本題に戻りますが、画面の表示サイズにあわせて横幅や高さを指定したい時があると思います。横幅はwidth:100%でいいのですが、高さはデバイスの画面解像度やブラウザの表示サイズによって変わってくることがあります。通常は特に問題ないのですが、異なる画面サイズでもパララックスなど一つのセクションを画面にピッタリ表示したい場合はどうしたらよいのか...

JavaScriptネイティブ版はこちら【Labs】表示しているブラウザの高さを取得してCSSのheightに指定2です。

CSSで高さ100%を指定する方法はこちらの【Labs】CSSで要素の高さ100%を指定する方法をご覧ください。

jQueryで取得した高さをCSSのheightに指定

jQueryで表示画面サイズを取得してCSSのheightに取得した高さを指定します。

JavaScript

$(window).load(function() {
//画面高さ取得
h = $(window).height();
$('#container').css('min-height', h + 'px');
});
$(window).resize(function() {
//画面リサイズ時の高さ取得
h = $(window).height();
$('#container').css('min-height', h + 'px');
});

このとき、CSSへの指定はheightにではなくmin-heightに指定するのがポイントです。そうすることでコンテンツ量が画面サイズより大きい場合、コンテンツの長さに応じた高さを表示してくれます。

その他、高さを指定したい要素のCSSをheight：100%にする方法もあります。この場合その要素の親要素の高さも100%にする必要があります。以前フルフラッシュサイトなどでSWFファイルを表示するときに使った手法なのでお馴染みだと思います。

他にもCSSの単位でvw、vh、vmin、vmaxなどがあり、それらを使ってCSSの高さを指定することもできます。「1vh = 1%」で、height: 100vh → height: 100%となります。こちらは%と違い親要素の高さと紐づけられることはありません。IEは9以上の対応となります。

サンプルデモ

Result
スマホでのご確認はこちらをどうぞ

関連リンク

【Labs】表示しているブラウザの高さを取得してCSSのheightに指定2
【Labs】CSSで要素の高さ100%を指定する方法