Materializeのフッターを最下部に表示する方法

最近、簡単なWebアプリを作るときはMaterializeというCSSフレームワークを使ってます。

ただ、コンテンツが少ないWebアプリだとフッターが意図しない位置に表示されるケースがあるんですよね。。。

そういう場合にフッターが画面途中にあがってこないように調整する方法を紹介します。

## Materializeとは？
そもそもMaterializeってなに？って方に簡単に説明するとBootstrapのようなCSSフレームワークです。


> Materializeとは、Googleが提唱するマテリアルデザインを取り入れたフレームワークです。 通常は全てのスタイルを自分で作成する必要がありますが、Materializeはよく使われるスタイルがあらかじめ定義してあるので、それを利用することにより整ったデザインのページが作成可能です。
> 引用元：[Materialize #001 - 構築準備 | dayjournal memo](https://day-journal.com/memo/materialize-001/)

## コンテンツが少ない状態のフッター

コンテンツが少ないアプリにMaterializeを当てて作ってみましょう。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <link rel="stylesheet" href="css/main.css">

  <!--Let browser know website is optimized formobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>かんたんなWebアプリ</title>
</head>

<body>
  <header>
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo center"></i>かんたんなWebアプリ</a>
      </div>
    </nav>
  </header>

  <main>
    <p>かんたんなWebアプリ</p>
  </main>

  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Footer Content</h5>
          <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
        </div>
        <div class="col l4 offset-l2 s12">
          <h5 class="white-text">Links</h5>
          <ul>
            <li><a class="grey-text text-lighten-3" href="#!">Link 1</a>
            <li><a class="grey-text text-lighten-3" href="#!">Link 2</a>
            <li><a class="grey-text text-lighten-3" href="#!">Link 3</a>
            <li><a class="grey-text text-lighten-3" href="#!">Link 4</a>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
        © 2018 Copyright Yusuke Ito(@yusukeito58)
      </div>
    </div>
  </footer>

  <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

</html>
```

読み込んでいるファイルはMaterialize用のCSS（`css/materialize.min.css`）とJavaScript（`js/materialize.min.j>`）、それとは別にアプリ用のCSS（`css/main.css`）だけになります。

アプリは3つの要素で構成されています。

- header
- main
- footer

このアプリを表示するとフッターが`main`の直後に表示されていることがわかります。

<img width="1048" alt="materialize-footer-bottom-1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116168/2653f5fb-0f9b-8daf-c44d-3645b8a528a5.jpeg">

あまりイケてないんで調整しましょう。

## フッターを最下部に表示する
コンテンツが少ないときは画面最下部に表示されるようにCSSで調整します。

```css
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}
```

<img width="1028" alt="materialize-footer-bottom-2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116168/73a99f5c-dd5a-3a9c-15f7-aa134b409b90.jpeg">


これでコンテンツが少ない場合でもフッターが画面最下部に表示されるようになりました。