【css】コンテンツが少なくてもfooterを下に固定する

ヘッダーとフッターを合わせても、コンテンツが画面の高さより小さい時があります。

コンテンツ量にかかわらず、浮いてしまったフッターを常に画面下部に配置されるようにしましょう。

参照コード

See the Pen
by nanami (@nanami_po)
on CodePen.

上記のコードをコピペでOKです。

ヘッダー、中身のコンテンツ、フッターのそれぞれの高さを取得して、条件文でヘッダーとコンテンツを足した高さが画面の高さより小さい場合、フッターを下に固定する、という処理をしています。

コンテンツが少なくてもfooterを下に固定する

jsの var $footer = $(‘footer’);は、フッターの要素を取得しているので、例えば<footer class=’footer_item’>footer</footer>ならvar $footer = $(‘.footer_item’);と指定することもできます。

良かったら参考にしてください◎

及川卓也/リブロワークスインプレス 2018年06月

狩野祐東 SBクリエイティブ 2016年10月28日頃

#HTML･CSS