公式ドキュメント
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>
対応前後を比較
対応前
<!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&hashtags=bulmaio&url=https://bulma.io&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>
対応後
<!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&hashtags=bulmaio&url=https://bulma.io&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弱者としては厳しいものがあるなぁと...
今回は致し方なさを感じつつ無理やりやるとこうなる!というのをメモしてみました📝