How can i maintain this footer visible in the bottom if the screen deserves it?-CodePudding

I'm working on this page:

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"
    
  >
    <div >
      <Header : />
      <main>
        <div>
          <router-view
            
            :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.

CodePudding user response：

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);
}

CodePudding user response：

You should flex and flex-col the div that's wrapping the header, main and footer elements. set the main element to flex-grow: 1. and then just reduce the top and bottom padding on the section element and the footer will stick to the bottom (no need to set heights with pixels).