記事の量が多くても少なくても画面下にコピーライト(フッタ)を表示するにはどうしたらよいか。完全ではないがCSSで表現してみた。
スポンサードリンク
▼HTML
<html> <HEAD> <META http-equiv=Content-Type content=”text/html; charset=utf-8″> <LINK media=screen href=”style.css” type=text/css rel=stylesheet> </HEAD> <BODY> <DIV class=wrapper> <p>ここに記事を書きます</p> </DIV> <DIV class=footer> <P>Copyright © 2009</P> </DIV> </BODY> </HTML> |
▼style.css
HTML { HEIGHT: 100%; } BODY { HEIGHT: 100%; margin: 0 0 0 0; } .wrapper { WIDTH: 700px; POSITION: relative; MIN-HEIGHT: 100%; HEIGHT: 100%; } .footer { WIDTH: 700px; POSITION: relative; } .footer P { WIDTH: 700px; BOTTOM: 4px; POSITION: absolute; TEXT-ALIGN: center; } |
◆ダウンロード
- CSSサンプル-常にフッタを下部に表示する :
http://casey.jp/filemgmt/visit.php?lid=3
参考文献
- A CSS Sticky Footer :
301 Moved Permanently
oldId.20090212154430295