カテゴリー: ウェブ制作

タグ:CSS(4)  簡単(4)  

CSS3の『flexbox』だけでフッターを一番下(最下部)に固定する

ウェブサイトを作成する際に、コンテンツの内容が少ないページのフッターがウィンドウの途中に来てしまって、下に不自然に余白ができてしまう問題ってありますよね。

フッターの下に隙間ができてしまう

↑こういう状態です。

JQueryを使って、調整する方法もあるのですが…

今回はCSS3のflexboxだけでフッターをウィンドウの最下部に固定する方法を紹介していきます!

まずはデモページを作成したのでご覧ください。

コンテンツ高がウィンドウより低い場合にはフッターが最下部に固定されます。

そして、コンテンツ高がウィンドウサイズを超えると、フッターはその高さに自動的に調整されているのが分かるかと思います。

早速、次項で使い方を説明していきます。

HTMLとCSS を記述する

まずはHTMLを記述をしていきます。

と言っても、特別何かを用意する必要はありません。

最低限書くのはこれだけです。

<body>
  <div id="wrapper">
    <main>

      コンテンツが入ります。

    </main>

    <footer>

      フッターが入ります。

    </footer>
  </div>
</body>

続いてCSSを記述します。

こちらも必要なのはこれだけです。


body,
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}


この記述だけでフッターを常に下部に固定することができます。

簡単に実装できるので、是非お試しください!

それでは、また次のブログで。

イベントのご案内

ウェブマーケティング系最大級のイベントが2019年11月23日(土)グランフロント大阪で開催!
10月11日(金)までのお申込みの方は早割の特別料金でご参加いただけます!
詳細はバナーをクリック

ウェブ解析士会議 in Osaka

2017.12.22

Twitterでつぶやく

Facebookでシェアする

実験中→ いいね: ツイート: 1

おすすめの記事

TOP