[CSS] footer要素下部固定する方法

1 min read

コンテンツ部分の高さがウィンドウサイズよりも小さくてフッターが浮いてしまう問題。

これまでの方法

レガシーブラウザにも対応するなら、「Sticky Footer Template for Bootstrap」でも紹介されているような手法を使わざるを得ない。

コードは以下の様な感じ。

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

ビューポートを使う

<main></main>
<footer></footer>
例えば上記の様な並びだった場合は、以下のようにすれば良い。
main {
  min-height: 100vh;
}

vhビューポートの高さに対する割合を設定できる。
これでコンテンツ要素が小さくても確実に高さが担保できる。綺麗に調整したい場合は、calc(100vh - フッターの高さ)などする必要がある(margin も考慮する必要あり)。

IE9 から対応なのでそこそこのモダンブラウザであれば使うことができる。

このページをシェアする

関連タグ

関連記事

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考

[CSS設計] ITCSSとは

TL;DR / CSS の問題 / ITCSS / 参考

[CSS設計] ITCSSをプロダクトに利用した所感

CSS の問題点 / CSS 設計 / ITCSS とは / ITCSS のメリット / おわり / 参考

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

Googleが配信している日本語ウェブフォント一覧

はじめに(結論) / M+ 1p / Rounded M+ 1c / はんなり明朝 / こころ明朝 / さわらび明朝 / さわらびゴシック / ニクキュウ / ニコモジ / Noto Sans Japanese / まとめ

[CSS] 国内の主要サイトのfont-familyを調べてみた

日本の主要サイトとは / font-family 一覧 / 関連