menu

【CSS】コンテンツが少ない時にフッターを最下部に表示する方法

2023年5月13日

Code

どうも、Ajiです。

WEBサイトを作っていると、ページのコンテンツが少ない時にフッターが画面の変な位置に表示される問題に遭遇することがありますね。

なんかダサいのでコンテンツが少なくてもフッターが画面の一番下に表示される方法をご紹介します。

まず、HTMLの構造は以下のようになります。

<body>
    <header>
        <h1>タイトルタイトルタイトル</h1>
    </header>
    <main> 
        <p>テキストテキストテキストテキスト</p>
    </main>
    <footer>
        <p>フッター</p>
    </footer>
</body>

CSSはこちら。

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
main {
  margin-top:auto;
}

このCSSのポイントは、body要素にdisplay: flex;とflex-flow: column;を設定して、子要素を縦方向に並べること、そしてmin-height: 100vh;を設定して、body要素が少なくともビューポートの高さを持つようにすることです。

で、main要素にmargin-top: auto;を設定することで、フッターを画面の最下部に押し下げる効果を得ます。

以上が、コンテンツが少ない時にフッターを最下部に表示する方法です。

これで、どんなにコンテンツが少なくてもフッターはきちんと画面の最下部に表示されます。

簡単ですね。

Follow Me!

Aji ろぐろぐみー筆者

フリーのWeb屋
詳しいプロフィールはこのページで色々書いてます。Twitterもやってます。コメント頂けると陸に上がった魚のようにピチピチ喜びます!

関連記事

コメントはこちらからどうぞ

プライバシーポリシーはこちら
また、コメントはこちらで承認の作業を行うまでは表示されません。ご了承ください。

CAPTCHA