Footer is always stays at bottom

The container div that surrounds everything. Inside that are three more divs; a header, a body and a footer.

When an HTML page contains a small amount of content, the footer can sometimes display on half of the page and leaving a blank space below. This can look bad, particularly on a large screen.

So, to avoid that problem

The footer has a set height in pixels (or rem). The div is absolutely positioned bottom:0; this moves it to the bottom of the container div.

When there is small content on the page the container div is exactly the height of the browser view port (because of the min-height:100%;) and the footer display neatly at the bottom of the screen.

When there is more than a page of content the container div becomes larger and extends down below the bottom of the viewport – the footer is still positioned at the bottom of the container div but this time you need to scroll down to the end of the page to see it. The footer is also set to width:100%; so it stretches across the whole page.

HTML

<!DOCTYPE html>
<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head> 
<body>
 <div class="container">
   <div class="content">
    content	
   </div>
   <footer class="footer">footer</footer>
 </div>
</body>
</html>

Of course, Which method you choose is entirely up to you, and the specifics of your design.

Mostly, we will face this type of problem in our own product applications,

When we are creating the static templates, we already have minimum required content of every page so we didnt face,

So what is this doing?
Container – sets its minimum height to 100% of the view port height (VH)

Content – sets minimum or maximum content of div and we give a space to div initially. Its having same height of footer is equal to padding-bottom of content.
footer – sets the height of div.

Compatible browsers

Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8

Cross Devices

works in all devices Mobile,Tab and Desktop

w3c standard css

100% valid css

No javascript and Jquery required

Free Demo & Download

How does it works ?

Its very easy to use follow the below steps.

Step1

copy CSSand paste in style.css page or paste under head tag.

<style>
 .container {
  position: relative;
  min-height: 100vh;
}
.content {
  padding-bottom: 2.5rem;    /* Footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
 </style>

Step2

Add div structure in body page

<div class="container">
   <div class="content">
    content	
   </div>
   <footer class="footer">footer</footer>
 </div>

The above example is help to you and save some time when implementing it.

Output

The footer is placed at the bottom of the page.

Leave a Reply

Your email address will not be published. Required fields are marked *