jQueryでウィンドウの高さを取得して、特定の要素の高さを常に100%にする方法のご紹介です。
ウィンドウの高さを取得して高さを調整
今回は例として#container という要素の高さを100%にしてみます。<head>タグ内で、jqueryファイルと一緒に以下のJavascript の記述を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<script src="./jquery.min.js"></script> <script> $(document).ready(function(){ hsize = $(window).height(); $("#container").css("height", hsize + "px"); }); $(window).resize(function () { hsize = $(window).height(); $("#container").css("height", hsize + "px"); }); </script> |
ページ読み込み時にウィンドウの高さを取得してスタイルで指定すると共に、$(window).resize…以降で、ウィンドウの高さが変わった（リサイズ）した場合に高さを取得す処理も入れます。
ウィンドウの高さを取得して要素の高さを100%にするデモ
コメント