【プラグイン不要。超カンタンにフッターを固定する方法】 - Webサイト専門プログラマの言いたい放題

フッタをコンテンツ量が少ない時は最下部に固定表示、
コンテンツ量が多い時は成り行きで表示させるスタイルシートです。

わざわざプラグインを使うまでもありません。
プラグインを使うと、プラグイン自体の js ファイルや css ファイルの
読み込みが加わるのでページの表示が遅くなる要因になります。

CSSで簡単にできることはCSSで組んだほうが良いです。

■HTML

<body>
 
<main>
  メイン コンテンツ
</main>
 
<footer>
  フッタ
</footer>
 
</body>

html {
  min-height: 100%;
  position: relative;
}
 
body {
  margin-bottom: 5em;
}
 
footer {
  bottom: 0;
  height: 5em;
  position: absolute;
}

HTMLタグがページ全体を囲むように高さを100%まで確保しておいて、
フッターを絶対座標（absolute）による指定で必ずページの一番下に
ぴったり張り付くように配置します。

そして、bodyタグにマージンを適用してフッターの高さの分だけ
ページの一番下に余白を作ります。

そうすると、そこにフッターが収まるという発想です。

↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓

codemy-lesson.office-ing.net
⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン

▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
　

office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで１位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価： 2,400円（税別）出版社：秀和システム
　
▼Amazon購入ページはこちら！