rockavoldy/keep-your-footer-on-the-bottom-of-the-page.md

## keep-your-footer-on-the-bottom-of-the-page.md

      
    Raw
  

              keep-your-footer-on-the-bottom-of-the-page.md
            
          
    Keeping your footer on the bottom of the page

It's really iritating, to make footer always on the bottom of the page, but here we are, i found this one and only this one is work
Basically, all you need to do is make the structure of your header - content - footer like below
<html>
  <head>
    .....
  </head>
  <body>
    <!-- start of page_container -->
    <div name="page_container" class="relative min-h-screen">
      <!-- start of content_wrapper -->
      <div name="content_wrapper" class="pb-10">
        <nav name="navigation" class="w-full"></nav>
        <article></article>
        ....
      </div>
      <!-- end of content_wrapper -->
      
      <!-- start of footer -->
      <footer name="footer" class="absolute bottom-0 w-full">
        ....
      </footer>
      <!-- end of footer -->
    </div>
    <!-- end of page_container -->
  </body>
</html>

I use tailwindcss here, because i think it's self-explanatory, but if you don't know what that class mean, you can always search them here

So, for the explanation

First, wrap all page, header, content, and anything on div page_container, make sure to explicitly add position: relative and min-height: 100vh (100vh = your height-resolution, if my display resolution is 1920x1080, 100vh on my screen will be 1080px)
Now, put content and footer inside the page_container, you can wrap the content section too, but it's not really needed
The magic is here, put position: absolute and bottom: 0 to the footer. Because footer is inside page_container, the position: absolute on footer will still be relative to page_container. And because page_container is set with min-height: 100vh, when actually the height is more than 100vh (say that you have a long content), footer will still going on the bottom of the page without shadowing any others element.

You can always see them in action on my blog here hehe