Positioning footer at bottom of webpage at any viewport

Positioning footer at bottom of webpage at any viewport

2 min. read

Main area of focus are html & body elements.

html
{
	height:100%;
}

body
{
	min-height:100%;
	box-sizing:border-box;
	position:relative;
}

Above css rules makes html & body elements to cover the entire viewport vertically.

Now, adjusting our footer element in the webpage

footer
{
	position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	height:100px;
}

Above css rules makes the footer element stick to the bottom of webpage at any viewport( relative to body element ), but there is something that need to be fixed.

Applying absolute positioning on footer takes it away from the normal flow of design, so inorder to create a dummy area for footer we have to apply some bottom padding on body element equivalent to height of footer element.

body
{
	padding-bottom:100px;
}

Using box-sizing : border-box on body element makes the bottom padding included in it's height, so there will be a gap of height 100px( padding-bottom : 100px ) at the bottom of webpage and using absolute positioning we have placed the footer at that position.

Combining all the above css rules

Below css rules keeps footer at bottom of the webpage irrespective of viewport's height.

html
{
	height:100%;
}

body
{
	min-height:100%;
	box-sizing:border-box;
	position:relative;
	padding-bottom:100px;
}

footer
{
	position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	height:100px;
}
Write comments