How to keep footer at the bottom of the page using CSS.

One of the commonest challenges you may come across when developing websites is keeping the footer at the bottom of a webpage especially in situations where the content on a page is not long enough to fill it. In such cases, the footer, instead of staying at the bottom of the page, rises up and leaves a blank space beneath it as shown below.

Footer not at bottom of page

The above behavior provides a poor user experience on a website. I would like to show you how to solve this problem. I will use the HTML and CSS code below for demonstration.

HTML

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="style.css" />
 </head>

<body>
 <div id="container"> 
   <section class="myheader"><h2>HEADER</h2></section>
   <div id="content">
       <article> 
			  <h3>Lorem Ipsum Dolor</h3>
			  <p>Consectetur adipiscing elit. Praesent vulputate elit felis, quis efficitur tortor viverra a. Quisque fermentum enim et enim imperdiet vestibulum at vitae tortor. Cras auctor scelerisque odio at varius. Nullam rhoncus nibh ut sem dignissim fringilla. Fusce dapibus nulla sed ipsum commodo molestie ut ut mauris.</p>  
			   <p>Consectetur adipiscing elit. Praesent vulputate elit felis, quis efficitur tortor viverra a. Quisque fermentum enim et enim imperdiet vestibulum at vitae tortor. Cras auctor scelerisque odio at varius. Nullam rhoncus nibh ut sem dignissim fringilla. Fusce dapibus nulla sed ipsum commodo molestie ut ut mauris.</p> 
			    <p>Consectetur adipiscing elit. Praesent vulputate elit felis, quis efficitur tortor viverra a. Quisque fermentum enim et enim imperdiet vestibulum at vitae tortor. Cras auctor scelerisque odio at varius. Nullam rhoncus nibh ut sem dignissim fringilla. Fusce dapibus nulla sed ipsum commodo molestie ut ut mauris.</p> 
		     

		    </article>
   </div>
   <footer id="footer"><h2>FOOTER</h2></footer>
 </div>
</body>

</html>

CSS

#container {
  position: relative;
  min-height: 100vh;
}

#content {
  padding-bottom: 10rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  background: #77CB7C;
  text-align: center;
  width: 100%;
  height: 10rem;            /* Footer height */
  border: 4px solid #E95C32;
}
#footer h2{
  padding: 2rem 0 0 ;
}
.myheader{
  background: #6FC2DA;
  width: 100%;
  height: 100px;  
  text-align: center;
  border: 4px solid #E6E932;
}
.myheader h2{
  padding: 8px 0;
}
h2{
  font-size: 35px;
  font-weight: 600;
}

To keep the footer at the bottom of the page, I have used div element with CSS #container id to wrap all other elements. This #container id has a relative position and a minimum height of 100% of the viewport height. The relative position enables its child elements to be set with an absolute position based on it.

#container {
  position: relative;
  min-height: 100vh;
}

The div with #content id contains the main content of the page which I have wrapped in <article> tags

The footer is given an absolute position with bottom:0; in order to stick to the bottom of it’s container. Since the footer it is not absolute to the viewport, it will move down if it’s container is taller than the viewport. 

#footer {
  position: absolute;
  bottom: 0;
  background: #77CB7C;
  text-align: center;
  width: 100%;
  height: 10rem;            /* footer height */
  border: 4px solid #E95C32;
}

Another important aspect to note is the content div is given a bottom padding equal to the footer height. This ensures that exactly enough space is left for the footer inside the container they are both in. If this bottom padding is not defined, the footer will overlap the lower parts of our content div.

content {
  padding-bottom: 10rem;    /* same as footer height */
}

The above code will now have the footer placed at the bottom of the page even when the content is not long enough to fill the whole page as illustrated below.

footer at bottom of page

With this kind of layout, when the content is taller than the viewport, you can scroll through the page content but the footer will remain at the bottom of the page.