TAGCSS
CSSでフッターをウインドウの下部に固定させる
シェア
ツイートCSSでフッターだけをウインドウの下に固定させる方法をメモ
> サンプル
サンプルの例で言うと、まず
</pre> <div id="header">ヘッダー部分</div> <div id="content">コンテンツ部分</div> <div id="footer">フッター部分</div> <pre>
のような構造のhtmlがあります。
それぞれのidにCSSを適用させるのですが、
まず
CSSでフッターをウインドウの下部に固定させる
方法としては、footerに対して
#footer {
position: fixed !important;
position: absolute;
bottom: 0;
left: 0;
～中略～
}
と指定すればＯＫです。
ただし、このまま適用させるとコンテンツ部分がフッターと重なってしまい見れなくなるので
もし仮に#footerの高さが100pxだとすれば、
#content {
～中略～
margin-bottom:100px;
}
#footer {
position: fixed !important;
position: absolute;
bottom: 0;
left: 0;
height:100px;
～中略～
}
のようにcontentに
margin-bottom:ヘッダーの高さ;
を指定すればＯＫです。
CSSのおすすめ参考書
ポチップ
