ページの高さを自動調節するjavascriptの追記（CSSのみで実現する）
- 2007年04月18日
- category:XHTML/CSS
- Comment(0)
- Trackback(0)
以前「ページの高さを自動調節するjavascript」という記事を書いたんですが、どうもCSSだけでできることが判明したので掲載しておきます。
ポイントはhtmlとbody要素にheight:100%を指定することと、包容ボックスにmin-height:100%を指定することです。javascriptの方法だとリサイズしても高さが変わらなかったんですが、こちらはリサイズするとフッタの高さも一緒に変わります。いいこと尽くしです。実行結果はサンプルページを参照下さい。ソースは以下になります。
<body>
<div id="wrapper">
<div id="header">
ヘッダ
</div>
<div id="contents">
コンテンツ
</div>
<div id="footer">
フッタ
</div>
</div>
</body>html,body{
margin:0;
padding:0;
background:#CCC;
height:100%;
}
#wrapper{
width:80%;
margin:0 auto;
background:#FFF;
position:relative;
min-height:100%;
_height:100%;
}
#contents{
padding10px;
padding-bottom:30px;
}
#header{
height:100px;
background:#F1D8D8;
}
#footer{
color:#FFF;
background:#000;
width:100%;
height:30px;
position:absolute;
bottom:0;
}IE6ではmin-heightが使えないのでどうしようかと思ったですが、height:100%にするとうまく動きました。なのでアンダースコアハックでIE6のみheight:100%を指定しました。
- Prev Entry
- ブログを書くとき用のHTMLエンコードツール
- Next Entry
- CSSの隣接セレクタを使ってMacのDock風インターフェースを作成する
トラックバックURL
http://webtech-walker.com/archive/2007/04/18002445.html/trackback
※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。
