0から目指すWebマスター Web制作に関する備忘録
検索

CSS

ブラウザ表示領域の上部(ヘッダー)と下部(フッター)を固定する

コンテンツの量に関わらず、スクロールしても、ヘッダーとフッターは常にブラウザ上に表示されるようにする。

ポイント

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;
}

(x)html

<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