edo1z blog

プログラミングなどに関するブログです

フッターをいい感じに下にくっつける

今まで僕はフッターをいい感じに下にくっつけたことがありませんでした。本日ついにいい感じに下にくっつけることが出来るようになりました。height:auto !importantというのはIE対策だそうですのでIE考えないなら不要です。wrapにcontentsとfooterを入れて、html,bodyをheight100%にして、wrapもmin-height100%にして、footerをposition:absoluteにしつつ、bottom:0にすると下にくっつきますし、コンテンツが多ければちゃんとコンテンツの最後に表示されます。基本のきだとは思いますが嬉しかったです。

#wrap{
    width:100%;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    position: relative;
}
#contents{
    padding-bottom:94px;
}
#footer{
    background-color: rgba(0,0,0,.5);
    color: #eee;
    font-size:13px;
    position: absolute;
    bottom:0;
    width:100%;
    padding:15px 0 10px 0;
    text-align: center;
    height:64px;
}
#footer a, #footer a:hover{
    color: #eee;
}