KH-WEBLOG TOP > WEBメモ > CSS > CSSでフッターをウインドウの下部に固定させる

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;
~中略~
}

と指定すればOKです。

ただし、このまま適用させるとコンテンツ部分がフッターと重なってしまい見れなくなるので
もし仮に#footerの高さが100pxだとすれば、

#content {
~中略~
	margin-bottom:100px;
}
#footer {
	position: fixed	!important;
	position: absolute;
	bottom: 0;
	left: 0;
	height:100px;
~中略~
}

のようにcontentに
margin-bottom:ヘッダーの高さ;
を指定すればOKです。

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事