ロゴ画像 HOME

ブログ

HOME > ブログ記事一覧 > [jQuery]フッターの高さが足りない時に伸ばすスクリプト

[jQuery]フッターの高さが足りない時に伸ばすスクリプト

  • 投稿日:2017/06/26
  • 最終更新:2020/11/03
この記事は 2017年6月26日 に投稿されました。
内容が古いかもしれません。ご注意ください。
※最後に更新されたのは 2020年11月3日 です。

フッターの高さが足りない!

内容がめっちゃ少ないページのときってフッターの高さが足りないことがままあると思います。
普段はhtmlタグの背景を指定することで違和感の解消をはかっていますが、
フッターの背景画像が1枚絵だった場合にはこれが破綻してしまう。

どうするか

「ウィンドウの高さに対してフッターの高さが少ないかどうか調べて、余ってたら伸ばす」ということをしたらいけました。

windowHeight = $(window).height(); //ウィンドウの高さ
footer_top = $("footer").offset().top; //footerの頭の位置
footerHeight = $("footer").outerHeight(); //フッターの高さ(marginやpaddingなども含む)

surplus = windowHeight – footer_top; //フッターの頭の位置からウィンドウの下端までの高さ

if( footerHeight < surplus ){
  $("footer").css('height', surplus + 'px');
}