↓メニュー

コンテンツが少ないときにフッターが上がってくる

2012年11月13日
riemitsu @ 5:18 PM

今回このサイトを作成していて、情報が少ないページのフッターがあがってきてしまうことに
気づきました。

これはデザイン上の問題なのですが。。。
なんとか下に固定しようと調べてみました。

いくつか方法はあるようですが、ほぼ共通しているのは、html,body,の高さを100%にして、
footerを押し出してそれから、ネガティブマージンでもって引き上げる。

因みに私のサイトは大まかにこんな感じのつくりになっています。
content1

HTMLを大まかに見てみるとこんな感じ

<body>
<div id="container">
<header>ヘッダー中身</header>
<div class="content">
内容いろいろ
</div>
</div>
<footer>
フッター中身
</footer>
</body>

中身が多かろうが少なかろうが、こうしたいのです。
content2

html, body, #container{
height:100%;
}
body > #container{
height:auto;
min-height:100%;
_height:100%; /* IE6用ハック */
}
.content{ width:960px;
margin:0 atuo;
padding-bottom:150px; /* フッターを上げてやることでコンテンツ中身と重なるので、
フッターの高さ分をpadding-bottomで調整する(下げてやる) */
}
footer{
position:relative;
margin-top:-100px; /* はみ出た分をあげてやる */
width:100%; height:150px;　/* フッター高さは固定させる */
}

ということでめでたく(?)、フッターは下に定位置を確保できたのでした。

この他にも、footerがheaderやcontentと同じようにcontainerに含まれていれば、
containerにposition:relative;を指定して、footerにposition:absolute;bottom:0;
を指定してやることで、下に固定できるようです。
ただ、このときも、footerの高さを指定することと、content部分には重なり防止に
footerの高さと同じ値のpadding-bottomを指定してやることは必須のようです。

カテゴリー:Web
コメントなし
コメント投稿
≪ *.IE7でネガティブマージンが効かなかった事件
#.リストマークが表示されない ≫
画像: 表示する | リンクにする
(1)最新記事 | ABOUT | お問い合わせ
(2)最新コメント
(3)アーカイブ
(4)カテゴリー／(5)タグ
†ログイン