- 2015年01月11日
- HTML/CSS, Javascript
- css覚え書き, Jquery
(K)footerの領域をコンテンツが足りなくても一番下に表示させる2つのやり方（jQueryとCSS）
WEBデザインでTOPページのデザインとコーディングが終われば、その後、下層ページのコーディングに取り掛かるんですが、ページのコンテンツ量によっては、内容が少なくてフッターが上部に浮いてくる場合があります。
そんな時にfooterを最下部にピッタリくっつける場合の方法を2パターン備忘録として残しておきます。
どういう現象の時というと、図で見るのが一番わかり易いですが、要はこんな感じの時の対処法の話です。
【その1】CSSのpositionで調節するやり方
最も一般的なやり方はCSSで調整するやり方ですかね。
【HTML】
<body>
<div id="wrapper">
<header>
普通のヘッダー
</header>
<nav>
ナビゲーション
</nav>
<div id="contents">
<p>内容の少ないコンテンツ</p>
<p>内容の少ないコンテンツ</p>
<p>内容の少ないコンテンツ</p>
<p>内容の少ないコンテンツ</p>
</div>
<footer>
下に下がって欲しいフッター
</footer>
</div><!-- /#wrapper -->
</body>
マークアップはごくごく一般的な記述
【CSS】
html{
height:100%; /*ブラウザいっぱいに高さを取得*/
}
body{
width: 100%;
height:100%; /*ブラウザいっぱいに高さを取得*/
margin:0;
padding:0;
background-color: #f2f1f1;
}
#wrapper{
width:960px;
margin:0 auto;
position: relative;/*フッターの位置設定の基準*/
min-height: 100%;/*最低値を100％にしておけばコンテンツ量が増えた分だけ伸びる*/
height: auto !important;/*ie6用（今いるかな？）*/
height: 100%;
background-color: #d3d2d2;/*コンテンツの背景色は全体囲みのココに指定*/
}
header{
height:100px;
background-color: #F70841;
}
nav{
height: 30px;
background-color: #000;
color: #fff;
}
#contents{
padding:60px 0;
height:auto;
height:100%;
padding-bottom: 100px;/*footerの高さ分だけ余白を設ける*/
}
footer{
height: 100px;
background-color: #F70841;
position: absolute;/*wrapperの基準の絶対配置*/
bottom: 0; /*一番下に配置*/
width: 100%;
}
ポイントとしては上記に書いてるとおりですが、まとめるとこんな感じ
- （1）htmlとbodyに高さ100％を指定してモニターいっぱいに表示
- （2）全体囲みの#wrapperを基準にfooterに「position:absolute」
- （3）footerに「bottom:0;」で一番下に表示
- （4）#contentsにfooterの高さ（height）分の余白を「padding」で指定
- （5）コンテンツ部分の背景色は全体囲みの#wrapperに記述しないと、#contentsの足りない部分の背景色が反映されない。
【その2】jQueryのプラグインで実装する
CSSでの設定はコーディング作業の最初の段階できちんとやっておけば楽なのですが、TOPページを終了後、コンテンツ量の少ない下層ページを作成した時に「あっ！footerが上に上がってくる！！」ってなってしまった時は手っ取り早くjQueryで対応するのがいいかもしれません。
footerをウィンドウ下部に固定する『footerFixed.js』
上記のサイトからJSをダウンロードしてhead部分に記述します。
<script type="text/javascript" src="footerFixed.js"></script>
後は下に落としたい部分の「#footer」にします。
※html5でマークアップしていた場合は記述をID表記にする必要があります。
<div id="footer">
下に下がって欲しいフッター
</div>
『footerFixed.js』で1pxの空きを削除する場合
こちらのjQueryを実装した際、一番下に1pxの空きが出来る場合があります。そういう時はJSファイルの32行目辺りの記述の「-1」の部分を削除すれば、一番下にぴったりくっつきます。
（変更前） document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px"; （変更後） document.getElementById(footerId).style.top = (wh-fh-ft)+"px";
まとめ
どちらでやるかは好みがわかれるかと思いますが、てっとり早く行きたいなら『footerFixed.js』の方がいいかもしれません。ですが、ページを表示した時に、一瞬footerが上部に表示され、カクっと下に落ちる現象も何度か確認していますので、CSSで最初のコーディングでposition設定をしておいたほうがいい気もします。
後々の事も考えて、的確な構築がつくづく大事なんだと再認識しました。今回は以上ですm(_ _)m
