[FIXED] How can i maintain this footer visible in the bottom if the screen deserves it?

Issue

I'm working on this page: https://redpadel.com, it has the home/main screen which long in content so of course you will need to scroll to the bottom until you bump into the footer, same happens with the FAQscreen, but there's another 2 screens => "About us" and "Contact" which have an unnecessary (and very little, but unnecessary anyway) scroll, => you can see it in this image:

I tried changing footer position class or making something like height: calc (100vh - [padding]) but there must be any better solution, if you can visit the page and tell me if you got any solution it would be really appreaciate! thank you and here's the <Layout code :

<template>
  <div
    ref="main"
    class="min-h-full h-screen w-full scroll-smooth overflow-y-scroll flex flex-col justify-between"
  >
    <div class="h-full">
      <Header :class="hideHeader ? 'hideHeader' : 'showHeader'" />
      <main>
        <div>
          <router-view
            class="overflow-x-hidden"
            :style="{ height: getScreenHeight }"
          />
        </div>
      </main>
      <Footer />
    </div>
  </div>
</template>

I'm using vuejs and tailwind, I avoided showing you the <script tag here cause all it has is some scroll logic related to the header.

Solution

The problem is your <section> inside your <main> having this class

.min-h-screen {
  min-height: 100vh;
}

I've edited it so that it will remove the height of the footer (which happens to be 88px) instead. If you only wish to make it available to specific pages, you can add an additional parent class like .contact-page .min-h-screen {}

.min-h-screen {
  min-height: calc(100vh - 88px);
}

Answered By - Jae

Answer Checked By - David Goodson (PHPFixing Volunteer)