コンテンツに被らない固定フッター

footerくっつくんじゃねぇ！！って思った方はいるはず。

特に1ページの要素が少ないとき。

どうしても上詰めされちゃって、フッターが上がってくる。

そんな時は固定footer！！

といってもこれも色々やりかたがあるみたいで、

どれが一番良いのかわからない・・・

わたしがよく使うのはこれ

【html】

【css】

backgroundは色分けのために入れているだけなので、なくても大丈夫。
必須なのが
・htmlのheight:100%;
・bodyのposition:relative、min-height:100%
これで高さを常に画面いっぱいにします。

・bodyのposition:relative、footerのposition:absolute bottom:0px
これで常に画面下にfooterを表示させます。

・#wrapのpadding-bottomの値とfooterのheightは同じ値にして、
　ください。画面が狭くてもfooterが被らないようにします。

これでわたしはfooterを固定して、さらに上の要素に被らないようにしてます。

上記を実行するとfooterは固定されつつ、

画面が狭くなっても、コンテンツに被りません。