0

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?

ElendilTheTall
  • 1,344
  • 15
  • 23

1 Answers1

4

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:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Any way you can post a more visual example of the problem? Perhaps using jsFiddle or Codepen? – Michael Benjamin Jul 26 '20 at 14:00
  • 1
    I've just transposed it to Codepen and it works fine, even when importing Bulma. So I guess it must be some problem with my specific Laravel/Vue/Bulma setup – ElendilTheTall Jul 26 '20 at 14:10
  • I don't see what it could be though. Perhaps something to do with all the nested containers. But I've tried every combination and nothing works. – ElendilTheTall Jul 26 '20 at 14:14
  • All the relevant code is in my question really. The default Laravel blade view holds the #app div that Vue hooks onto, and then injects the Index component. The Index component renders all the views handled by the Vue router. I've tried targeting the #app div, and the div in the Index component containing the router-view, nav, and footer, using your example code. It works fine in Codepen, but in the app, nada. – ElendilTheTall Jul 26 '20 at 14:18
  • Finally got it. Had to add `min-height:100vh` to the #app div as well. – ElendilTheTall Jul 26 '20 at 14:24