いい加減覚えよう！footer最下部

毎回ググってるような気がするのでメモ。

htmlが以下のような場合

<div id="outer">
<div class="contents">

</div>
<footer>

</footer>
</div>

以下の指定でOK。

#outer {
width: 100%;
min-height: 100%;
position: relative;
}

.contents {
min-height: 100%;
height: auto !important;
height: 100%;
padding-bottom: 100px;
position: relative;
}

その上でfooterに以下を。

footer {
position:absolute;
width:100%;
height:100px;
bottom:0;
text-align:center;
overflow:hidden;
}