'Set Footer Section at the bottom , VueJs

I have installed vue cli & added header & footer components in a vue page but they are coming one under another how i can place footer section in bottom ?

Here is the code pen - https://codesandbox.io/s/competent-colden-ql4qe?file=/src/App.vue

https://i.stack.imgur.com/XPSI7.png

vue.jsvue-component


Solution 1:[1]

Fixed it using position:fixed; to bottom.

#footer{
 position:fixed;
 bottom:0;
}

Solution 2:[2]

You can try also: in App.vue

<template>
  <v-app id="app" :theme="getTheme">
    <AppHeader/>
    <v-main>      
      <router-view/>      
    </v-main>
    <AppFooter/>
  </v-app>
</template>

<style lang="scss">
#app {
    min-height: 100vh; 
    margin: 0; 
    display: grid;
    grid-template-rows: 1fr auto;
}
</style>

And in AppFooter:

<template>
    <footer class="footer">
...
    </footer>
</template>

<style lang="scss" scoped>
.footer {
    bottom: 0;
    position: sticky;
    height: auto;
</style>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Evgeni Lilov

Related Questions