[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック

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

サイトのキャプチャ

Simple CSS Sticky Footer

デモ

デモではコードを編集して、いろいろ試すこともできます。
Chrome, Safari, Firefox, Opera. IEは8+でご覧ください。

サイトのキャプチャ

デモページ(コンテンツ量が少ない時)

コンテンツ量が少ない時はフッタは常に最下部に固定表示、多い時は成り行きで表示されます。
コードを編集できるので、コンテンツ量を多くしてみます。

サイトのキャプチャ

デモページ(コンテンツ量が多い時)

コンテンツ量が多い時は通常通り、スクロールすると最下部に表示されます。

サイトのキャプチャ

デモページ(コンテンツ量が多い時)

実装

HTML

最小限の構成はこんな感じです。
コンテンツはmain要素でなくても平気です。コンテンツとフッタだけあればOK。

<body>

<main>
  メイン コンテンツ
</main>

<footer>
  フッタ
</footer>

</body>

CSS

デモではフッタの高さを5emに設定しており、それに合わせてbodyにマージンを設定します。

// STYLES - essential for sticky footer
html {
  min-height: 100%;
  position: relative;
}

body {
  margin-bottom: 5em;
}

footer {
  bottom: 0;
  height: 5em;
  position: absolute;
}

sponsors

top of page

©2018 coliss