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

8690 ワード
CSS Materialize MaterialDesign CSS テキストリンク

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

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

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

Materializeとは？

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

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

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

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

<!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の直後に表示されていることがわかります。

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

フッターを最下部に表示する

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

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

main {
  flex: 1 0 auto;
}

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