WEB(K)Campus-ウエブ系キャンパス-

娯楽は少なめ。備忘録がほとんどのキャンパスノート代わりのWeb系のメモサイトです

  • メール・お問い合わせ
  • Twiieerのリンク
  • ピンタレストのリンク

(K)footerの領域をコンテンツが足りなくても一番下に表示させる2つのやり方(jQueryとCSS)

footer_under02

WEBデザインでTOPページのデザインとコーディングが終われば、その後、下層ページのコーディングに取り掛かるんですが、ページのコンテンツ量によっては、内容が少なくてフッターが上部に浮いてくる場合があります。
そんな時にfooterを最下部にピッタリくっつける場合の方法を2パターン備忘録として残しておきます。

どういう現象の時というと、図で見るのが一番わかり易いですが、要はこんな感じの時の対処法の話です。

footer_under01

【その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の足りない部分の背景色が反映されない。

DEMO

【その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";

DEMO

まとめ

どちらでやるかは好みがわかれるかと思いますが、てっとり早く行きたいなら『footerFixed.js』の方がいいかもしれません。ですが、ページを表示した時に、一瞬footerが上部に表示され、カクっと下に落ちる現象も何度か確認していますので、CSSで最初のコーディングでposition設定をしておいたほうがいい気もします。

後々の事も考えて、的確な構築がつくづく大事なんだと再認識しました。今回は以上ですm(_ _)m

今回参考にさせていただいたサイト様

  • このエントリーをはてなブックマークに追加

コメントする

  • サイト内検索

  • About Me

    けぃしぃ(@Kc_fuji)

    WEB制作会社に務めるサラリーマンです。 DTP、WEB制作、映像編集 チョコチョコやってます。
    このブログは、制作の覚え書きとWordpressの実験所として利用しています。

  • Recent post

  • Category

  • Twitter

  • Archives

    • 2017 (3)
    • 2016 (4)
    • 2015 (19)
    • 2014 (33)
    • 2013 (25)
  • ページの先頭へ