【CSS】フッター要素を常に下に表示したい！CSSで！

コンテンツが少ないときなど、フッター要素が上にきてしまうので、なんか思ったんと違ーう！となってしまうケースありますよね。
それを回避するための方法をメモメモ。

▼HTML

<div id="container">
<div id="header"><!--ヘッダー--></div>
<div id="contents"><!--コンテンツ--></div>
<div id="footer"><!--フッター--></div>
</div>

▼CSS

body , html {
    height: 100%;
}
#container {
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
#contents {
    padding-bottom: 100px;
} 
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
}