How to make a footer sticky or stick to the bottom of a page, I have tried everything literally nothing works.



  • Here is my code, what should I do?

    <q-footer class = "footer footerSticky " >
            <!-- <q-toolbar> -->
              <!-- <q-toolbar-title></q-toolbar-title> -->
              <!-- <div id="root"> -->
          <div id="container">
            <div id="contacts">
              <div id="contacts--contact">
                <p>{{ mail }}</p>
                <p>{{ phone }}</p>
              </div>
              <div class = "footerLinks text-bold">
                QUICK LINKS:
              </div>
              <div class = "footerLinks text-bold">
                <a class = "footerLinkText" href = "/#/home">HOME</a>
                <!-- HOME -->
              </div>
              <div class = "footerLinks text-bold">
                <a class = "footerLinkText" href = "/#/projects">PROJECTS</a>
              </div>
    
              <div class = "footerLinks text-bold">
                <a class = "footerLinkText" href = "/#/pipeline">PROJECT PIPELINE</a>          </div>
              <div class = "footerLinks text-bold">
                <a class = "footerLinkText" href = "/#/about">ABOUT ME</a>
              </div>
    
              <!-- <div id="contacts--social"> -->
                <div><img class = "footerLogo"
          alt="Artemis Robotics"
          src="~assets/aryah.png"
          width="100" height="100"
        ></div>
                <!-- <div></div>
                <div></div> -->
              <!-- </div> -->
            </div>
            <div id="mentions">
              <p>{{ mention }}</p>
            </div>
          </div>
        <!-- </div> -->
            <!-- </q-toolbar> -->
          </q-footer>
    


  • @aoztanir

    You can do this with the ‘view’ property of the q-layout component. The layout builder tool is very handy to play with different behaviors of headers, footers, drawers configurations:
    https://quasar.dev/layout-builder

    The code of this layout has a sticky footer and was generated bij the layout tool. It’s sticky because of the capital F in the view property: hHh lpR fFf

    <template>
      <q-layout view="hHh lpR fFf">
    
        <q-page-container>
          <router-view />
        </q-page-container>
    
        <q-footer elevated class="bg-grey-8 text-white">
          <q-toolbar>
            <q-toolbar-title>
              <q-avatar>
                <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
              </q-avatar>
              Title
            </q-toolbar-title>
          </q-toolbar>
        </q-footer>
    
      </q-layout>
    </template>
    

Log in to reply