全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
ボックスの高さをブラウザの高さにフィットさせる方法
2019.05.06
※この記事は2019年05月06日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
今回は、ボックスをブラウザの高さに合わせる方法を、
ウィンドウサイズの可変に対応できる内容で紹介します。
【目次】
高さをCSSでheight:100%指定
【ポイント】親要素、子要素の両方へ「height:100%」を指定します。
高さをCSSでheight:100vh指定
【ポイント】子要素へ「height:100vh」を指定します。
「vh（viewport height）」は、ビューポートの高さに対する割合です。
% の場合は対象となる要素のプロパティが親要素のそれと紐付けられるため、
必ずしもビューポートの高さが基準になるとは限りません。
よって、paddingを指定しても影響を受けにくい方法です。
高さをjQueryで指定
【ポイント】jQueryの読み込みを忘れないようにしましょう。
Javascript記述内「outerHeight」は、paddingの影響を受けないようにするための指定です。
まとめ
フルスクリーンのデザインに対応できる方法でした。
モバイル端末は向きによって縦・横の長さが変わったり、PC表示でも条件は様々です。
どのような場合にも全画面表示できる、これらの方法を是非お試しください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
