こんにちは。すーさんです。
今回は、webページのヘッダーとフッターをCSSで位置固定する方法についてです。
ヘッダー用のCSSは下記になります。
CSS:
.headerbar {
width: 100%;
height: 100px;
position: fixed;
top: 0;
}
・position: fixed;
これでスクロールしても位置が固定されます。
・top: 0;
上からの配置位置を「0」とすることで、一番上に表示されます。
フッターの場合は下記のようにします。
CSS:
.footerbar {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}
ヘッダーと異なるのはtopプロパティではなくbottomプロパティに「0」を指定して、一番下に表示するようにしています。
コンテンツ部分には、通常時、ヘッダー／フッターにコンテンツが隠れないようにヘッダー／フッターと同じ高さの余白(padding)を上下に設定する必要があります。
また、HTML5のheader／footerタグを利用する場合も、CSSでposition／top／bottomプロパティを設定すれば大丈夫です。