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

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

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

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

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

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

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

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

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を指定してやることは必須のようです。