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 class = "footerLinks text-bold">
                QUICK LINKS:
              <div class = "footerLinks text-bold">
                <a class = "footerLinkText" href = "/#/home">HOME</a>
                <!-- HOME -->
              <div class = "footerLinks text-bold">
                <a class = "footerLinkText" href = "/#/projects">PROJECTS</a>
              <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 id="contacts--social"> -->
                <div><img class = "footerLogo"
          alt="Artemis Robotics"
          width="100" height="100"
                <!-- <div></div>
                <div></div> -->
              <!-- </div> -->
            <div id="mentions">
              <p>{{ mention }}</p>
        <!-- </div> -->
            <!-- </q-toolbar> -->

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

    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

      <q-layout view="hHh lpR fFf">
          <router-view />
        <q-footer elevated class="bg-grey-8 text-white">
                <img src="">

Log in to reply