Windows10Pro64bit1909ver
Firefox80.0.1(64bit)
フッターの固定や最下部設置についてはいろいろあるようです。
自分のサイトレイアウトのポリシーや見た目の好きさで選択すればいいと思います。
目次の最後にまとめてます。
【シンプルにフッターを設置】
<footer class="text-center p-2 bg-secondary ">Copyright ©</footer>問題点
単にフッターを設置するとページに対してコンテンツが少ない場合、フッターが底上げされてしまいます。
【フッターをページ下に設置】
footerのcssに「 margin-top: auto;」を追加します。
footer {
margin-top: auto;
}これでコンテンツが少なくてもフッターが下部に配置されます。
コンテンツが多いと普通のページの通りスクロールが最後までいくとフッターが表示されます。
この段階でいいという方もいると思います。
【フッターをページ下部に常に固定表示】
- 常にフッターを表示したい。
- フッターのclassに「 fixed-bottom」を指定します。（Bootstrap利用）
- これでコンテンツ量が多くても常にフッターが表示されるようになります。
- しかし、中のページを最後までスクロールしたときに最後のコンテンツがフッターに隠れてしまいます。これはいけません。大事なことが隠れてしまいます。
- 調べます。
- ヒントがありました。
- footerの前の要素にstyle=”padding-bottom: 60px;”を設定します。
- しかし値の適正値がわかりません。
- いろいろ調べましたがメンドクさそうでした。
- なんとなく直感で空要素を入れたら、なんか見た目うまくいきました。
<div>end</div>
<footer class="text-center p-2 bg-secondary ">Copyright ©</footer>- プロの方たちすいません。需要があればリファクタリングします、させます。
【ここまでの結果】
- footerにfixed-bottom
- footer直前に空要素を追加
- 空要素を入れればfooter前の要素には「style=”padding-bottom:60px;”」は不要
【ちょっと考えたことjQuery利用（冗長？）】
- jQueryを使用。
- footerの高さを取得
$(function(){
let height = $("footer").height();
alert(height);
});- 記述時点でalert：24を出力。
- その値をfooterの直前タグのCSS「style=”padding-bottom:Xpx;”」に当てはめる。
- style=”padding-bottom:Xpx;”はjQueryで追加するので前もって書いておかなくていい。
- プラス5pxくらいしてもいいかも。
$(function(){
let height = $("footer").height();
//alert(height);
$(".container-fluid").css("padding-bottom", `${height + 5}px`);
});- おっ！これでいいじゃん。それぞれのクライアントでうまくやってくれるのではないでしょうか。
- 見た目うまくいきました。要素を確認する。
- F12からのインスペクター
- または近い要素を右クリックからの「要素の調査」
<div class="container-fluid" style="padding-bottom: 29px;">意図したものにちゃんとなってます。(24たす5で29!!)すげぇ～。
- 他のデバイス？F12からの他端末表示で簡易確認…。
- 問題なし！！以上。
追加情報
- なるほどそう来ましたか…笑。
- Firefoxのページ全体キャプチャだと変な感じになってます。
- ここは捨てます悲笑！
【まとめ】
- 個人的にフッターを常に下部に表示し、コンテンツを隠しません。
- footerタグがあります。
<footer>フッター</footer>- footのCSSを設定します。
- ページの下部かコンテンツの下に表示される。
footer {
margin-top: auto;
}- footerにfix-bottom。
- コンテンツの下ではなく、ページの下…見えている下に常に表示する。
<footer class="fix-bottom">フッター</footer>- jQuery記述
- padding-bottomでコンテンツ隠しを回避する。
$(function(){
let height = $("footer").height();
//alert(height);
$("フッターの直前の要素").css("padding-bottom", height + 5);
});