Stick Footer at Bottom of Page But Not Fixed

One of my recent web projects needs to build a stick footer at the bottom of the page but not fixed using CSS only. My first intention leads me to use the position: fixed;property.

But the client doesn’t want the footer visible all the time on the webpage. He wants to keep the footer always at the bottom of the short content pages to avoid the footer floating somewhere up in the air.

The client has following three requirements to behave the footer:

The footer should be visible if the content is shorter than the user’s viewport height.
If there is enough content and taller than the user’s viewport height, then the page pushes the footer lower and should disappear from viewport as it would naturally.
The third most important thing it must be done without Javascript and without using the
the position: fixed;property.

Sometimes we have less content on some pages of the website which lead to floating the footer somewhere up in the air. Our solution is perfectly designed for this purpose.

In our previous tutorial, we did an experiment with building Javascript Responsive Stick Footer which you can also check out if you can’t compromise on browser compatibility.

This solution will stick the footer instead of fixed it so it always visible whether the viewport height less or more – No matter.

When we have enough content on the page it pushes the footer at lower of the page but the issues come when we have less content on the page, a sticky footer will hang the footer somewhere in the middle of the page.

How to Stick Footer at Bottom of Page But Not Fixed

Our HTML is simple and basic, We have defined the three basic elements. We have a header, content and footer elements.

You can place anything inside the element to start designing your web page. We have place some content inside our main container content.

<html lang="en" >
<body>
    <header>
       This is our header of website.
    </header>
    <div class="content">
      <p>It's a content area where you can place all the content and can define all of HTML element. Whenever I do design a website, I often make the footer fixed at bottom of page, even content is too short to push it to the bottom of browser window naturally.</p>
    
      <p>However, if the content is good enough then the footer should disappear from browser window as it should normally without fixed to the viewport.</p>
            
      <p>If you want to set the fixed height for footer than make sure to add padding-bottom of the footer's parent element to the same value or larger if you need some spacing. </p>
    
      <p>It will help you to prevent the footer from overlapping the content area.</p>

    </div>
    <div class="footer">
        It's a footer area that always positioned at the bottom of the page, but <strong>not fixed</strong>.
    </div>
</body>
</html>

Now we will take a look at the CSS. Let’s start with setting the 100% height for HTML element. The body element requires some attention. We will use the relative position because we will handle the sticky footer using the absolute position.

As for the content area, we will apply some of the basic styles which include margin, some of the top padding, max-width for responsive design and font-family to prepare a nice demo.

html {
  height: 100%;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
}
.content {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
  font-family: "Raleway",sans-serif;
  line-height: 30px;

}
.content h1 {
  margin-top: 0;
}
/**
 * Footer Styles
 */
.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #d94575;
    text-align: center;
    color: #fff;
}

Finally, the last most important footer style requires to make the stay at bottom but of course not fixed. We will take help of position: absolute; element and will set it all point values to zero except the top.

It is important to set the right, left and bottom points value to zero so the footer stays in the center of the viewport.