Web blog WEBブログ

ボックスの高さをブラウザの高さにフィットさせる方法

2019.05.06

こんにちは。コーダーの兼山です。

今回は、ボックスをブラウザの高さに合わせる方法を、
ウィンドウサイズの可変に対応できる内容で紹介します。

高さをCSSでheight:100%指定

【ポイント】親要素、子要素の両方へ「height:100%」を指定します。

高さをCSSでheight:100vh指定

【ポイント】子要素へ「height:100vh」を指定します。

「vh(viewport height)」は、ビューポートの高さに対する割合です。

% の場合は対象となる要素のプロパティが親要素のそれと紐付けられるため、
必ずしもビューポートの高さが基準になるとは限りません。

よって、paddingを指定しても影響を受けにくい方法です。

高さをjQueryで指定

【ポイント】jQueryの読み込みを忘れないようにしましょう。

Javascript記述内「outerHeight」は、paddingの影響を受けないようにするための指定です。

まとめ

フルスクリーンのデザインに対応できる方法でした。

モバイル端末は向きによって縦・横の長さが変わったり、PC表示でも条件は様々です。

どのような場合にも全画面表示できる、これらの方法を是非お試しください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口