Test!

写真とWebデザインと時たまダイエット

Bootstrap4でフッターを下部に固定する方法

毎回フッター下部に固定する方法で躓くのでメモ。
メモ。

Bootstrap4やそれ以前のBootstrapのExampleにもsticky footer、つまりフッターをcontentsの内容量関係なく、ブラウザの一番下に固定しようっていうサンプルがあったんです。
が、しかし
コンテンツの部分に背景色を設定していたりすると、背景色は、テキストがある部分までしか表示されないんですね。フッターは下に行ってるのに。

それで、背景色もドバーっとしたまで行く方法ないかなーって思っていたときに、こちらのサイトのであったので、少し改造してみますた。(なんかうまく説明できなくてすいません)


[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス
や、ほんとお世話になってます。


>==
.content {
min-height: calc(100vh - 70px);
background: #fff;
}
.footer {
height: 50px;
}
==<

.contentに背景色設定しちゃうだけ、ほんとこれだけ、
Bootstrapだとcontainerクラスをつけたあげると真ん中あたりに表示るんでいいんじゃないですかね?