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

[aoztanir]

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>

[dobbel]

@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>