CSS フッターの下に隙間ができたときの対処

ページの中身が少なくフッターが浮いた状態になってみっともないことがある。
そんなときの解決方法。

FOOTERをWRAPPER の中に入れているときにはFOOTERの上にダミーのボックスを置き、それにFOOTERの高さと同じだけ「padding-bottom」するのが味噌。セレクターは「contents」とした。
それとWRAPPERは「position」を「relative」 に、FOOTERは「position」を「absolute」にしておく。
あとは普通にHTML、BODYとWRAPPERを「width: 100%」しれば完成。

参考にさせてもらったサイトはこちら
https://liginc.co.jp/designer/archives/6435

-----------------------------------

html,body{
     height:100%;
}
#wrapper{
     width: 100%;
     position: relative;
     height:auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
}
#contents{
     padding-bottom:140px; /*フッターの高さと同じ*/
}
#footer{
    height:140px;
     position:absolute;
     bottom:0;
}



しかし、FOOTERが400pxとか500pxとかデカい場合、この方法ではCONTENTの「padding」の分、空白部分が400pxとか500pxとかデカくなるのでみっともない。その場合は「background」か何かでごまかすしかなくなる。