height100%のレイアウト覚書

条件：

コンテンツがブラウザウィンドウの高さからあふれる場合は、
footer要素がコンテンツの下につく。
コンテンツがブラウザウィンドウの高さにおさまる場合は、
footer要素がウィンドウの下部につく。

html:

body直下のタグの構造は以下のような感じ。

	<div id="container">
		<div id="conatiner_inner">
			...
		</div>
	</div>
 	<div id="footer">
 		...
	</div>

css:

html、bodyのheightは100%。

#containerにはmin-height:100%を指定。
#footerにheightを指定し（ピクセル指定）、
その分だけ#containerのmargin-topにネガティブマージンを指定する。

例えば、
#footerのheightが50pxなら、
#containerにmargin-top:-50pxを指定する。
ただし、#footerの上下にborderをつけている場合などは、
スクロールバーが出ないようにmargin-topの値を調整する。

#container_innerのpadding-topに、
#containerのmargin-topで引いた分のピクセルを足して、
ネガティブマージンの指定により隠れてしまったコンテンツを見えるようにおく。

上の例の場合は、

	padding-top:50px;

border等の指定によりスクロールバーが出てしまう場合に、
この値も調整する必要があるかも。

これにより、
コンテンツがあふれたときは、#footerがウィンドウの外に追い出され、
コンテンツがおさまるときは、#footerがウィンドウの下部につく。

IE6の場合

IE6の場合は、min-heightは使えないので、
#conatinerに

	height:100%

を指定する。
#footerに上下のborderを指定している場合、
ほかのブラウザと、スクロールバーが出なくなる#containerのネガティブマージンの値が変わる可能性がある。
その場合は、IE6のみ別指定にする。
（いずれも、セレクタハック（*html）などでIE6だけに適用されるようにしておく。）

IE6は、
コンテンツがブラウザウィンドウからあふれる場合は、
コンテンツの高さをheight100%と解釈。
コンテンツがブラウザウィンドウにおさまる場合は、
ブラウザウィンドウの高さをheight100%と解釈するので、
min-heightが使えなくても、上記の方法で何とかなる。