たまにですが・・・・
ホームページの表示縦幅が短く、大きなモニターで閲覧した場合、本来下部にあるはずのフッターがウインドウの中程のまできているサイトを見かけます。
画面下へスクロールするほどのコンテンツ量がなくても、フッターはやはりウインドウ下部に表示したいですよね。
そんな場合のCSSテクニックです。
CSSは
*{margin:0; padding:0;}
html,body{height:100%;}
div#all{position:relative; min-height:100%}
*html div#all{height:100%;}
div#contents{padding-bottom:50px;}
h1{margin-bottom:20px; height:50px; background-color:#CCCCCC;}
address{position:absolute; bottom:0; width:100%; height:50px; background-color:#CCCCCC}
HTMLは
<body>
<div id="all">
<div id="contents">
<h1>header</h1>
<p>表示内容</p>
</div>
<address>
footer
</address>
</div>
</body>
