【laravelでの実装例付き】フッターを常にページ最下部に表示する方法

Yuta Kishi

2019年2月11日 13:58

はじめに

現在、nyan😸に続くWebアプリケーションを開発中です🎉そちら開発で私が学んだ開発テクニックもブログで紹介していきたいと思います🖋

まず本記事では、フッターを常にページ最下部に表示する方法です。

＜目次＞
・やりたいこと
・実装方法
・Laravelでの実装例
・参考文献

やりたいこと

✅フッターを最下部に表示したい
✅コンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させたい
✅ヘッダーの長さを指定はしたくない

実装方法

こちらの記事で５つの実装方法が紹介されていますが、私が最も簡単だと思ったフレックスボックス（フレキシブルボックス）を利用したやり方を紹介します。

//HTML
<html>
<body>
    <header class="header">ヘッダ</header>
    <div class="content">
        コンテンツ
    </div>
    <footer class="footer">フッタ</footer>
</body>
</html>

//CSS
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;

肝は、contentに設定しているflexプロパティ。

flexプロパティは、flex-growプロパティ・ flex-shrinkプロパティ・ flex-basisプロパティの値を一度にまとめて設定するものなのですが、flex-growに1を設定することで、ヘッダとフッタを配置して余るスペースを全てcontentに割り当てています。

Laravelでの実装例

私は現在PHPフレームワークLaravelで実装しているため、最後にLaravelでの実装例を紹介します。

master.blade.phpでヘッダやフッダなど共通部分を、content.blade.phpでページ独自のコンテンツを表現しているとした際は以下の通りです。

//master.blade.php
<html>
<body>
    <header class="header">ヘッダ</header>
    <div class="content">
        @yield('content')
    </div>
    <footer class="footer">フッタ</footer>
</body>
</html>

//content.blade.php
@extends('master')
@section('content')
    コンテンツ
@endsection

超絶簡単ですね。

参考文献

Product Owner at docomo / プライベートでもC向けWebサービス作ってます / 元 #入江開発室 / #nyan / SketchやXd、Figmaなどのデザインアセットのシェアサービス #collin