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

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);
});

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