フッターを固定せずに最下部に表示する方法

コンテンツ量が少ないページで「フッターの下に余白ができるのを防ぎたいけど、position: fixed;で固定はしたくない…」という場合に使える方法をご紹介します。

やり方

display: flex;を仕様することで固定せずに最下部に表示することができます。

HTML

  

    

      ヘッダー
    
    

      コンテンツ
    
    
  

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.header {
  height: 100px;
  background-color: red;
}

.content {
  flex-grow: 1;
  background-color: yellow;
}

.footer {
  height: 100px;
  background-color: skyblue;
}

結果