how to display footer at bottom of page

Hi Friends,

Once in my project, I came across with CSS is dynamic layout. I need to develop footer which stick to the bottom of a page. For example, consider the condition of regardless the height of the content of a page, the footer should stick to the bottom of the page.

When an HTML page contains a small amount of content then footer comes halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen.

There are several ways to make a footer stick to the bottom of a page using CSS, but the cleanest and most well tested method I have come across is CSS Sticky Footer.

You will need to structure your webpage in the following way in order to manage footer at the bottom of page.

This is your HTML part:

 
Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

This is your CSS part:

html,body {
	margin:0;
	padding:0;
	height:100%;
}
#container {
	min-height:100%;
	position:relative;
}
#header {
	background:#c2dcf4;
	padding:10px;
}
#content {
	padding:10px 10px 80px 10px;
}
#footer {
	background:#ccc;
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	padding:0px 10px 0px 10px;
}

The above CSS will keep your footer at the bottom of the page but you will need to make a few tweaks to the code.

You need to make sure that height of your footer and bottom margin of your content should be same. you can see in the above example.

You can see online demo from here, sticky_footer

Hope this will help you !!!.

Leave a Reply

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>