2008年4月24日木曜日

 

【CSS】フッタをページ最下に配置

コンテンツ少なくても大丈夫。「position:fixed;」じゃない。

// layout.css
* {
    margin: 0;
}
html, body {
    height: 100%;
} 
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer {
    height: 4em;
}
// HTML ソース

<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>

参考したところでは「id:wrapper」の中に空要素を入れてるが、無くても大丈夫っぽいので気にしない子。(Firefox、IE6)

参考

A CSS sticky footer

ラベル:


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google