ホムペジ制作の課題を学生に出したんだけど、フッタを一番下に固定する（コンテンツが少なくてもフッタだけは一番下に表示させる）ってところで悩んでいたのでここに掲載します。
まずは学生の例・・。（画像はクリックで拡大です）
↑ 一見うまくいっているように見えますが・・
↑ コンテンツを多くしてスクロールするとフッタが上にずれてしまいます(*´д｀*)
これじゃダメだってことで、ヒントを与えました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="shift-jis" />
<title></title>
<style>
html,body {
height: 100%;
background-color: skyblue;
margin:0;
}
header,footer {
background-color: yellowgreen;
}
#wrap{
width: 980px;
margin: 0 auto;
min-height: 100%;
_height: 100%;/* IE6用に・・ */
background-color: white;/* ※contentと同じなのがポイント */
}
#content {
width: 960px;
margin: 0 auto;
padding-bottom: 121px;/* ウィンドウをリサイズされた時にfooterとcontent部分が重ならないようにするためにfooterの高さ分以上の領域を確保 */
background-color: white;
}
footer {
height: 120px;
margin-top: -120px;/* footerの高さ分のマージンをマイナスでとる */
}
</style>
</head>
<body>
<div id="wrap">
<header>header</header>
<div id="content">
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
内容です<br />
</div><!-- /content -->
</div><!-- /wrap -->
<footer>footer</footer>
</body>
</html>
上記のソースに自分のソースの中身を組みこめ、と。
なんとかフッタの最下部固定が出来ました。
ちなみに上記ソースは画面で見ると以下な感じです。
↑ まずは、コンテンツの内容が少なくてもフッタはウィンドウ最下部に固定されています。
↑ そして、コンテンツがたくさんでウィンドウからあふれていても・・
↑ スクロールすればしっかりと見れて、フッタは最下部に表示されます。
