jquery windowに合わせメイン部の高さをリサイズ
2012/02/14
ヘッダ部とボディ（コンテンツ）部で構成されているページでボディ（コンテンツ）部のみ高さを自動調整したい。
※jqueryはよくわからん。とりあえず「jquery」のライブラリ（？）が必要ってことは最近覚えた。
サンプル
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>○○○</title>
- <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
- <script type="text/javascript">
- /* 読み込み完了したとき */
- $(document).ready(function()
- {
- // IE系だと先に高さを適当に指定してあげる必要あり。
- if (!jQuery.support.style)
- {
- $("#hed").css({"height":"15px"});
- }
- auto_resize();
- });
- /* ウィンドウリサイズしたときの処理 */
- $(window).resize(function()
- {
- auto_resize();
- });
- /* ヘッダとコンテンツの高さをあわせる */
- function auto_resize()
- {
- // ヘッダ部をマイナスした値がボディ（コンテンツ）部
- var tmp_height = $(window).height() – $("#hed").height();
- $("#bdy").css("height", tmp_height);
- }
- </script>
- </head>
- <body>
- <!−− ▼ヘッダ部 −−>
- <div id="hed"></div>
- <!−− ▼ボディ（コンテンツ）部 −−>
- <div id="bdy"></div>
- </body>
- </html>
メモ
やるべきことは「ページを表示したときに高さを取得・設定」と「ウィンドウをリサイズしたときに高さを再取得・設定」の２つ。
さらに分割すると「ページを表示したとき」「ウィンドウをリサイズしたとき」「高さを取得・設定」の3種類。
高さを取得・設定
「ページを表示したとき」と「ウィンドウをリサイズしたとき」に実行する処理で、メインになるヤツ。
26～32行目の箇所。
「ウィンドウの高さ（tmp_height）」から「div#hedの高さ（$(window).height()）」の差分を「div#bdyの高さ（$(“#hed”).height()）」にする。
ページを表示したとき
8行目の「$(document).ready(function(){});」ってヤツ。
「div#hed」に対して高さを指定していないとIEで不思議なことになる。
高さを指定してるなら11～14行目は不要。
指定していないなら「IEの場合は適当な高さを指定」する必要あり。
「適当な高さ」を指定する際「overflow:auto;」とか指定すると求めているものにはならないのでCSSを調べながら頑張る。
指定していないなら小さいサイズを指定しておけばよさげ。
※根本的に原因は違うっぽい。※jquery IEで要素の高さの取得について
ウィンドウをリサイズしたとき
20～23行目の箇所。
何も考えずに「高さを取得・設定（auto_resize(){}）」を実行する。