footerが上がってくる・下がらない問題を解決〜コンテンツ量に合わせて動くfooter

htmlを書いているときコンテンツ量によってはfooterが上がってきてしまうので困っていました。

常に一定量のコンテンツしか扱わないというならコンテンツの高さで調整すればいいですが、そういうわけにも行かない場合の方が多いかと・・(アプリケーション作る時は特に)

と、いうわけで勝手にフッターがいい感じになってくれるcssの書き方を調べて見ました


<html>

<body>

<header>ヘッダー</header>

<div class="wapper">

<div class="main">コンテンツ</div>

<footer>フッター</footer>

</div>

</body>

</html>

&nbsp;

これにcssを当てて行きます


body, html{

height: 100%;

}

.wapper{

height: auto !important;

width: 100%;

height: 100%;

min-height: 100%;

position: relative;

}

.main{

padding-bottom: 100px;

}

<br data-mce-bogus="1">

footer{

bottom: 0;

background: #e8e8e8 ;

height: 100px;

width: 100%;

text-align: center;

position: absolute;

}

html bodyの高さをいっぱいに広げます。これをしないとコンテンツの高さに依存することになるのでコンテンツ量が少ない時はそれ以上の高さを出せません

続いてフッターとコンテンツを囲んでいるものの設定です。

position: relative;とすることでフッターの位置の基準設定を親要素に書きます

min-height: 100%;は少なくても高さは画面いっぱいにしますよということ。これはコンテンツに合わせて伸びてくれるので便利

ブラウザによってはこれが適応されないから、上記の書き方で適応できないもののために同じ意味になるこっちも書いておく

height: auto !important;

height: 100%;

次はコンテンツを囲んでるもの。これのpadding-bottomをフッターの高さ指定する。そしたらフッターの高さ分の空間を作ってくれる

フッターそのものの設定に関してはposition: absolute;で、絶対このいちということを指定する

bottom: 0;とすることで一番下に置くよということ

あとはフッターにコンテンツのpaddinで指定した高さを指定すればok

個人的につまずいたこと

初めはフッターとコンテンツを囲むものが必要だってわかってなくて、コンテンツとフッターが完全に分かれた状態でどうにかしようとしてました

そしたら微妙にコンテンツにフッターがかぶるということが多かったです。

あえて一つにまとめて、その中での位置関係を指定するとうまく行きます