DEV

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

#CSS

今まで僕はフッターをいい感じに下にくっつけたことがありませんでした。本日ついにいい感じに下にくっつけることが出来るようになりました。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;
}