Jquery(K)footerの領域をコンテンツが足りなくても一番下に表示させる2つのやり方(jQueryとCSS)HOMEHTML/CSS(K)footerの領域をコンテンツが足りなくても一番下に表示させる2つのやり方(jQueryとCSS)WEBデザインでTOPページのデザインとコーディングが終われば、その後、下層ページのコーディングに取り掛かるんですが、ページのコンテンツ量によっては、内容が少なくてフッターが上部に浮いてくる場合があります。そんな時にfooterを最下部にピッタリくっつける場合の方法を2パターン備忘録として残しておきます。いう現象の時というと、図で見るのが一番わかり易いですが、要はこんな感じの時の対処法の話です。一般的なやり方はCSSで調整するやり方ですかね。100%;}ポイントとしては上記に書いてるとおりですが、まとめるとこんな感じ(1)htmlとbodyに高さ100%を指定してモニターいっぱいに表示(2)全体囲みの#wrapperを基準にfooterに「position:absolute」(3)footerに「bottom:0;」で一番下に表示(4)#contentsにfooterの高さ(height)分の余白を「padding」で指定(5)コンテンツ部分の背景色は全体囲みの#wrapperに記述しないと、#contentsの足りない部分の背景色が反映されない。DEMO【その2】jQueryのプラグインで実装するCSSでの設定はコーディング作業の最初の段階できちんとやっておけば楽なのですが、TOPページを終了後、コンテンツ量の少ない下層ページを作成した時に「あっ!footerが上に上がってくる!!」ってなってしまった時は手っ取り早くjQueryで対応するのがいいかもしれません。上記のサイトからJSをダウンロードしてhead部分に記述します。src="footerFixed.js"></script>後は下に落としたい部分の「#footer」にします。※html5でマークアップしていた場合は記述をID表記にする必要があります。</div>『footerFixed.js』で1pxの空きを削除する場合こちらのjQueryを実装した際、一番下に1pxの空きが出来る場合があります。いう時はJSファイルの32行目辺りの記述の「-1」の部分を削除すれば、一番下にぴったりくっつきます。(wh-fh-ft)+"px";DEMOまとめどちらでやるかは好みがわかれるかと思いますが、てっとり早く行きたいなら『footerFixed.js』の方がいいかもしれません。ページを表示した時に、一瞬footerが上部に表示され、カクっと下に落ちる現象も何度か確認していますので、CSSで最初のコーディングでposition設定をしておいたほうがいい気もします。後々の事も考えて、的確な構築がつくづく大事なんだと再認識しました。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。