ブラウザの画面を100%使い切ってページを表示する

JavaScript

デスクトップアプリケーションを開発していると、ウィンドウの大きさに合わせてウィンドウのメイン部の中身の大きさが動的に変わったりします。しかし、Webアプリケーションでは、なかなかそういう風に作ったりはせずに、画面が小さければ、スクロールバーで移動することが多いです。

でも、やっぱりそういう事をしたいときもあるので、ブラウザの画面の高さを100%使い切って表示してみます。

とりあえず動かしてみる

とりあえず動作画面。表示したウィンドウを大きくしたり小さくしたりしてみてください。真ん中の部分が大きくなったり、小さくなったりしていると思います。

ポイント

標準化されていないもののJavaScriptではViewPortを取得する事ができます。クロスブラウザ用のソースコードはここを参照させていただきました。



var getViewPort = function() {

 	var width, heiht;

 	if (self.innerHeight) {

		// all except Explorer

		width = self.innerWidth;

		height = self.innerHeight;

	} else if (document.documentElement && document.documentElement.clientHeight) {

		// Explorer 6 Strict Mode

		width = document.documentElement.clientWidth;

		height = document.documentElement.clientHeight;

	} else if (document.body) {

		// other Explorers

		width = document.body.clientWidth;

		height = document.body.clientHeight;

	}

	return {width: width, height: height};

}

このviewportを利用すると、現在表示できる幅と高さを取得する事ができるので、そこから、headerとfooterの高さを引きます。そうすれば、main部の高さを算出できるので、style.heightにその高さを設定してあげる事によって、表示部を100%使い切る事ができます。



var resize = function(event) {

	var main = document.getElementById('main');

	var viewport = getViewPort();

	var height = viewport.height - 200; // 200 = header.height + footer.height

	main.style.height = (height <= 0 ? 0 : height) + 'px';

}

resizeとloadイベントにリスナーを設定

高さが変わるときは、resizeイベントのときなので、resizeイベントに関数を設定します。また、最初の表示時にも呼ばれるようにloadイベントにも設定をしておきます。これで、ブラウザの画面を100%使い切って表示するページの出来上がりです。

CSSのみでトライ

結果からいうと、Firefox, Safari, Operaでは問題ないのですが、IEがだめでした。
ソースコードはこれ
CSSではtopとbottomを指定すると、heightを自動的に算出してくれます。ですので、JavaScriptが必要ないのですが、IEではtopを指定するとbottomが無視されるというバグがあるため、うまく動いてくれません。これをなんとかできれば、JavaScriptがいらなくなって良いんですけど。。。

追記:resize関数の中でheightがマイナスになってしまう事があったので修正しました。