フッターを画面下部に固定する方法（Opera 9.51対策含む）

CSSでレイアウトして、フッターを設置する際、コンテンツの量が少ないページの場合、フッターが画面の下から離れてしまいます。そこでフッターを画面下部に固定する方法を使います。
ただ、他サイトで色々な方法が載っていますがOpera 9.51だとレイアウトが崩れることがわかりました。

まずは下記ソースをご覧ください。

HTMLコード

 
<div id="container">
    <div id="header">ヘッダー</div>
    <div id="contents">
        <h1>タイトル</h1>
        <p>コンテンツ</p>
    </div>
    <div id="footer"><p>フッター</p></div>
</div>
 

CSSコード

 
* {
    margin: 0;
    padding: 0;
}
 
html,body {
    height: 100%;
    background-color: #222222;
    text-align: center;
    margin: 0px auto;
}
 
div#container {
    position: relative;
    margin: 0px auto;
    width: 900px;
    height: 100%;
    min-height: 100%;
    background-color: #FFFFFF;
    text-align: left;
}
 
body > #container {
    height: auto;
}
 
div#contents {
    height: auto;
    padding-bottom: 50px;
}
 
#header,
#footer {
    width: 900px;
    height: 100px;
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
}
 
#header {
    background: url(hd_bg.jpg) no-repeat left bottom;
}
 
#footer {
    position: absolute;
    bottom: 0px;
    background: url(ft_bg.jpg) no-repeat left top;
}
#footer p{
    padding-top: 30px;
}
 

この方法は、他サイトでよく紹介されているフッター固定方法です。ただ問題はOpera 9.51です。そのページを更新したら、コンテンツの高さが100%じゃなく、コンテンツ内容の高さになってしまいます。そしてウィンドウサイズを変えたら、また100%の高さに戻ります。百聞は一見にしかず。下のサンプルで試してください。

→Opera 9.51で発生したバグ

原因はまだ分かりませんが、この崩れを防ぐには、html,bodyにoverflow: auto;を追加すればいいみたいです。

CSSコード

 
html,body {
    height: 100%;
    overflow: auto;	/* Opera 9.51対策*/
    background-color: #222222;
    text-align: center;
    margin: 0px auto;
}
 

→Opera 9.51対策をしたサンプル

需要が少ないOperaの為だけに、こんな対策もとらないといけないのかと思われる方もいるかもしれませんが、見つけてしまった以上、見逃すわけにはいきませんでした。（個人的にOperaは好きですし）
どうしてもバグが気になる方は試してみてはいかがでしょうか。