Search code examples
cssflexboxbulma

Bulma/Flexbox footer not sticking to the bottom of the page

I'm making an app with Vue and Laravel using Bulma as my CSS framework. I want a footer that stays at the bottom of the page even when the content doesn't 'push' it there. Currently I have this in my custom CSS:

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

#app{
  flex:1;
}

#app is the div in my default Blade template into which my app is injected:

<body>
    <div id="app">
        <index></index>
    </div>
</body>

And this is my main Vue component in which the routed components are injected

<template>
    <div>
        <Navigation/>
        <router-view :key="$route.fullPath"></router-view>
        <footer class="footer">Test</footer>
    </div>
</template>

This works fine when there's enough content to push the footer to or beyond the bottom. But if there's not there's a large gap at the bottom of the screen and the footer is pushed right up to the bottom of the content. What gives?

Solution

  • Flex properties work only between parent and child elements. There's no inheritance beyond the children. So if you have something like this:

    <body>
   <div id="app">
       <header></header>
       <main></main>
       <footer></footer>
   </div>
</body>

    . . . and want to pin the footer to the bottom at all times, you'll need something like this:

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

#app {
  flex: 1;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

    More about the scope of flex properties:

    Understanding flex auto margins: