Set Footer Section at the bottom , VueJs

Question

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

Does this answer your question? [How to keep footer at bottom of screen](https://stackoverflow.com/questions/18739937/how-to-keep-footer-at-bottom-of-screen) — palaѕн, Jun 04 '20 at 05:15
Have you tried in the codepen - https://codesandbox.io/s/competent-colden-ql4qe?file=/src/App.vue ? — , Jun 04 '20 at 05:24
Can you please advise what is preventing it (footer) from placing it in bottom ( which class' css ) ? That would be helpful — , Jun 04 '20 at 05:28

score 3 · Accepted Answer · answered Jun 04 '20 at 05:33

3

Fixed it using position:fixed; to bottom.

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

answered Jun 04 '20 at 05:33

exactly, it is just CSS stuff, no related to vue nor vue-component https://codesandbox.io/s/cocky-fog-dezz4?file=/src/components/Footer.vue – Luckylooke Jun 04 '20 at 12:32
2

This will make it sit at the bottom of the page, but when the content fills the page there will be overlapping as it will be FIXED to the bottom of the viewable page, not the content. – Richard KeMiKaL GeNeRaL Denton Jun 04 '21 at 15:27

score 0 · Answer 2 · answered Apr 25 '22 at 12:10

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>

score 0 · Answer 3 · answered Jun 12 '23 at 07:00

0

The best way is to use position: static, such that the element follows the natural order of components and divs. It will naturally fall to the bottom. Only way I could get it to work. In tailwind it is just class="static".

answered Jun 12 '23 at 07:00

akemedis

414
2
6
17

Set Footer Section at the bottom , VueJs

3 Answers3