カクカクしかじか

技術的なアレコレ

BULMAでページ下部にフッターを固定する方法

公式ドキュメント

https://bulma.io/documentation/layout/footer/

問題

公式ドキュメントを読んでみるとわかるのですが、Bootstrapとは異なり、ページの下部にフッターを固定する通称 Sticky Footer を実現するクラスが Footerの章に記載されていません。

関連Issue

https://github.com/jgthms/bulma/issues/47

応急処置

footer クラスを当てている部分に navbar is-fixed-bottom の2つのクラスを追加してページ下部に固定する🚑

<footer class="footer navbar is-fixed-bottom">
  <div class="container">
    <div class="content has-text-centered">
      2020 ©CASAREAL
    </div>
  </div>
</footer>

対応前後を比較

対応前

f:id:fuqda:20200504091904p:plain

<!Doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>BULMA PLAYGROUND</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.css" rel="stylesheet">
  </head>
  <body>
    <nav class="navbar is-light">
      <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
          <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
        </a>
        <div class="navbar-burger burger" data-target="navbarExampleTransparentExample">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div id="navbarExampleTransparentExample" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item" href="https://bulma.io/">
            Home
          </a>
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link" href="https://bulma.io/documentation/overview/start/">
              Docs
            </a>
            <div class="navbar-dropdown is-boxed">
              <a class="navbar-item" href="https://bulma.io/documentation/overview/start/">
                Overview
              </a>
              <a class="navbar-item" href="https://bulma.io/documentation/modifiers/syntax/">
                Modifiers
              </a>
              <a class="navbar-item" href="https://bulma.io/documentation/columns/basics/">
                Columns
              </a>
              <a class="navbar-item" href="https://bulma.io/documentation/layout/container/">
                Layout
              </a>
              <a class="navbar-item" href="https://bulma.io/documentation/form/general/">
                Form
              </a>
              <hr class="navbar-divider">
              <a class="navbar-item" href="https://bulma.io/documentation/elements/box/">
                Elements
              </a>
              <a class="navbar-item is-active" href="https://bulma.io/documentation/components/breadcrumb/">
                Components
              </a>
            </div>
          </div>
        </div>

        <div class="navbar-end">
          <div class="navbar-item">
            <div class="field is-grouped">
              <p class="control">
                <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
                <span class="icon">
                  <i class="fab fa-twitter"></i>
                </span>
                  <span>
                  Tweet
                </span>
                </a>
              </p>
              <p class="control">
                <a class="button is-primary" href="https://github.com/jgthms/bulma/releases/download/0.8.2/bulma-0.8.2.zip">
                <span class="icon">
                  <i class="fas fa-download"></i>
                </span>
                  <span>Download</span>
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </nav>
    
    <section class="hero is-medium is-primary is-bold">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            Primary bold title
          </h1>
          <h2 class="subtitle">
            Primary bold subtitle
          </h2>
        </div>
      </div>
    </section>
    
    <footer class="footer">
      <div class="container">
        <div class="content has-text-centered">
          2020 ©CASAREAL
        </div>
      </div>
    </footer>
  </body>
</html>

対応後

f:id:fuqda:20200504091255p:plain

<!Doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>BULMA PLAYGROUND</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.css" rel="stylesheet">
  </head>
  <body>
    <nav class="navbar is-light">
      <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
          <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
        </a>
        <div class="navbar-burger burger" data-target="navbarExampleTransparentExample">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div id="navbarExampleTransparentExample" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item" href="https://bulma.io/">
            Home
          </a>
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link" href="https://bulma.io/documentation/overview/start/">
              Docs
            </a>
            <div class="navbar-dropdown is-boxed">
              <a class="navbar-item" href="https://bulma.io/documentation/overview/start/">
                Overview
              </a>
              <a class="navbar-item" href="https://bulma.io/documentation/modifiers/syntax/">
                Modifiers
              </a>
              <a class="navbar-item" href="https://bulma.io/documentation/columns/basics/">
                Columns
              </a>
              <a class="navbar-item" href="https://bulma.io/documentation/layout/container/">
                Layout
              </a>
              <a class="navbar-item" href="https://bulma.io/documentation/form/general/">
                Form
              </a>
              <hr class="navbar-divider">
              <a class="navbar-item" href="https://bulma.io/documentation/elements/box/">
                Elements
              </a>
              <a class="navbar-item is-active" href="https://bulma.io/documentation/components/breadcrumb/">
                Components
              </a>
            </div>
          </div>
        </div>

        <div class="navbar-end">
          <div class="navbar-item">
            <div class="field is-grouped">
              <p class="control">
                <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
                <span class="icon">
                  <i class="fab fa-twitter"></i>
                </span>
                  <span>
                  Tweet
                </span>
                </a>
              </p>
              <p class="control">
                <a class="button is-primary" href="https://github.com/jgthms/bulma/releases/download/0.8.2/bulma-0.8.2.zip">
                <span class="icon">
                  <i class="fas fa-download"></i>
                </span>
                  <span>Download</span>
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <section class="hero is-medium is-primary is-bold">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            Primary bold title
          </h1>
          <h2 class="subtitle">
            Primary bold subtitle
          </h2>
        </div>
      </div>
    </section>

    <footer class="footer navbar is-fixed-bottom">
      <div class="container">
        <div class="content has-text-centered">
          2020 ©CASAREAL
        </div>
      </div>
    </footer>
  </body>
</html>

参考

こちらのissueではとある方が以下のようなことを言っており、今回はそちらを参考にしました👀

これは理想的ではありませんが、
フッターにnavbar is-fixed-bottomクラスを指定することもできます。
彼らがフッターのis-fixed-bottomを持っているだけでなく、
is-fixed-bottomが何かのためのヘルパーであるのではないのはおかしい。

https://github.com/jgthms/bulma/issues/47#issuecomment-390487118

所感

せっかくCSSフレームワークを使っているので、こういう部分が標準で用意されてないのはCSS弱者としては厳しいものがあるなぁと...
今回は致し方なさを感じつつ無理やりやるとこうなる!というのをメモしてみました📝