高さ100％でfooter(フッター)を常に下に配置し、コンテンツの量に追従して可変するCSSとHTML。

コンテンツの量が少なくても高さを100％保ち、フッターが常に下に配置されるようにし、また多い場合でも可変して表示するCSSとHTMLテンプレート。

HTML
<div id="wrapper"> <p style="width:500px;height:300px;background-color:#ff0000;">このheightを変えてお試し下さい</p> </div><!--wrapper--> <div id="footer"> <p>Copy Right (C) All Right Reserved webデザイナーのおぼえがき</p> </div><!--fotter-->

CSS
@charset "Shift_JIS"; html,body{ height:100%; background:#000000; } #wrapper{ min-height:97%; width:950px; background:#ffffff; margin:0 auto; } /* IE6 */ *html #wrapper{ height:97%; } #footer{ clear:left; height:3%; background:#dcdcdc; margin:0 auto; width:950px; }

Firefox、safari、IE6、IE7、IE8に対応しています。

>>他のWebデザインブログも見る