コンテンツの量に関わらず、スクロールしても、ヘッダーとフッターは常にブラウザ上に表示されるようにする。
ポイント
- htmlとbodyに高さ100%を指定する
- 「position:fixed;」の実装
CSS
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
#header{
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
background-color:#ccc;
}
#conts{
padding:55px 0 105px;
}
* html #conts{
padding:0;
}
#footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:100px;
background-color:#ddd;
}
width:100%;
height:100%;
margin:0;
padding:0;
}
#header{
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
background-color:#ccc;
}
#conts{
padding:55px 0 105px;
}
* html #conts{
padding:0;
}
#footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:100px;
background-color:#ddd;
}
(x)html
<body>
<div id="header">ヘッダー</div>
<div id="conts">
テキスト1<br />
テキスト2<br />
テキスト3<br />
</div>
<div id="footer">フッター</div>
</body>
<div id="header">ヘッダー</div>
<div id="conts">
テキスト1<br />
テキスト2<br />
テキスト3<br />
</div>
<div id="footer">フッター</div>
</body>
IE6以下では、「position:fixed;」をサポートしていないため、固定にはできない。どうしても、ということであればJavascriptで実装するしかないのではないだろうか。
動作確認済みブラウザ
- Windows
- IE7,Firefox3,Firefox2,Opera9.6,Chrome,Safari3
- Mac
- Safari3,Safari2,Firefox3,Firefox2,Opera9