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

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

materialize-footer-bottom-1.jpg

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


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

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

body {

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

main {
flex: 1 0 auto;
}

materialize-footer-bottom-2.jpg

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