headerとfooterのページ内固定

こんにちはｍスウェルデザインのｗです。

headerとfooterの固定って結構沢山使うことが多いので

いつものやり方を備忘録として残します。

このやり方でページをスクロールしても動かないheaderとfooterが作れます。

1.position: fixed;を使いheaderを固定

スクロールしても絶対位置で固定されたままとなります。（IE6では未対応）

2. top: 0px;left: 0px;に指定。画面の左端に固定します。

絶対位置に固定しても上部に隙間ができてその下から内容が見えてしまったりします。

画面上にピッタリ合わせて隙間ができないように指定します。

See the Pen vLWMNG by swelldesign (@w-swelldesign) on CodePen.