読者です 読者をやめる 読者になる 読者になる

FLYING

〈全日本・紀文豆乳飲料シリーズ「麦芽コーヒー」の500ミリリットルパックを扱う小売店が少ないことに遺憾の意を表明する会〉活動記録

ブロック要素のwidth/heightを動的に設定する

javascript xhtml/css

CSSを書いていると,ウィンドウ幅から任意の定数値を引いた値をブロック要素のheightプロパティに設定したい!なんてことがよくある。CSSのトリックでなんとかなる場合もあるが,大抵の場合はCSSだけではうまくいかずに泣き寝入りすることになる。こんなしょうもないことのために泣き寝入りはしたくない,IEの独自拡張(expression)も使いたくないとなると……javascriptを使うしかない。

で,どうせjavascriptを使うなら,ブラウザごとの細かい動作の違いに悩まされたりはしたくないので,そこら辺の差異を吸収してくれるらしいライブラリjQueryを導入してみる。以下実際に使用したコードそんまんま。

$(document).ready(function() {
	//headerHeight and gnaviHeight are constants
	//otherHeight contains 10px padding of content
	var headerHeight = $("#header").attr('offsetHeight');
	var gnaviHeight = $("#gnavi").attr('offsetHeight');
	var othersHeight = headerHeight + gnaviHeight + 10;
	//resizing event handler
	function resizeContainer(e) {
		//windowHeight and footerHeight are changed dynamically
		var windowHeight = $(window).height();
		var footerHeight = $("#footer").attr('offsetHeight');
		var containerHeight = windowHeight - footerHeight - othersHeight;
		$("#content").css("height", containerHeight);
		$("#sidebar").css("height", containerHeight);
	}
	//bind event handler
	resizeContainer(null);
	$(window).bind("resize", resizeContainer);
});

想定しているレイアウトは以下のようなもの。