A HTML footer that's always at the bottom of the page.
Tuesday, 20 October 2015
I was creating a html template and one of the things I needed it to have was a sticky footer. A sticky footer in the sense that when there is little content on the page , it will settle at the bottom of the page rather than appearing in the middle of the page. This footer will then be pushed down further if the content of the page overflows the view port. |
| HTML and CSS footer that stays on the bottom of a page when there isn't enough content on the page. |
The HTML.
<!DOCTYPE html>
<html>
<head>
<title>Sticky Footer</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="mainContent">
<h2>Very Few Content</h2>
<p>
As you can see, this page has very little content, barely enough to fill this page yet the footer stays at the bottom.
The fun part is that when the content increases, the footer will be pushed down and you will only see it if youe scroll down to th end of the document. Add more content on the page to see this.
</p>
</div>
<footer>
<div class="footerContent">
<p>
I'm the awesome footer, I always stay at the bottom of the page .....
</p>
</div>
</footer>
</body>
</html>
Our aim is to make the footer stay at the bottom of the page when there isn't enough content in the .mainContent div to fill the whole page. Also when there is alot content, the footer should scroll along with this content. So lets add the css.
The CSS.
html, body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
display: table;
font-family: sans-serif;
background: url(background.jpg);
background-size: cover;
}
.mainContent{
padding: 15px;
width: 50vw;
margin: 50px auto;
background: #fff;
}
footer{
background-color: #2271d1;
display: table-row;
height: 50px;
}
.footerContent{
padding: 15px;
width: 50vw;
margin: 0 auto;
color: #fff;
}
In the css is where all the magic happens.
- We start by styling the HTML document and the body tag. First thing is to remove any default padding and margins, so that all the elements fill the entire space without spaces around them. We then set the width and height to 100% so that the document occupies the entire view port/window. Then we specify the entire page to use sans-serif as its default font. The background is too plain, it wouldn't hurt to add a background image to make it a little lively. The background-size value of "cover" makes sure the image covers the entire background. The most important part is that we set the HTML and Body display to table, so that we can later treat the footer as a table row.
- The next part was the div with the main content, we target it using css via it's class name "mainContent". The 15px padding will make sure the content is neatly padded within the div. On the width, we set 50vw which literally means that the width be set to 50% of the view ports width (This is not a good practice when designing responsive templates. Make sure you create some media queries for mobile devices). The margin sets the top and bottom margins to 50px and the right and left margins to auto (this will center the div). Finally we give it a background of white so that the text is visible against the background.
- The third order of business is the footer. First thing, we give it a nice blue background(#2271d1). Then the most important part, setting it's display as a table-row. This makes the footer act as a table row hence the ability to settle on the bottom of the page. I know most of you probably have a problem with designing layouts with tables but I would ask you to think again. CSS tables are different from HTML tables. Please read here for more information on this. Lastly we assign the footer a height of 50px. Note that this height is not fixed as it will automatically increase in size when more content is added, plus it's responsive.
- Lastly, we will just copy the values of .mainContent minus the background color and paste them into .footerContent.
By: Unknown | On: Tuesday, 20 October 2015 | At: 10:44 |
IN: CSS, CSS3, footer, HTML, HTML5, Sticky, sticky footer
