Luigi is a passionate software developer working in Java since 2000. In 2001 he co-founded the Java User Group Torino, the first local JUG in Italy. Quickly after that, many other JUGs have born in Italy following JUG Torino's example. Since some years now, he is working as free lance software consultant between Italy, Germany, UK and Switzerland, on several industries. His personal interests include software, science fiction books and movies, traveling, photography and good food. Luigi is a DZone MVB and is not an employee of DZone and has posted 19 posts at DZone. You can read more from them at their website. View Full User Profile

The “Sticky Footer” Problem

05.04.2012
| 2670 views |
  • submit to reddit
Some time ago, I developed an application and I tried to add in the layout a footer bar located at the bottom of the browser containing the copyright and legal information. Well, I failed. At the end, the footer bar close at the bottom of the application layout, but it was not “sticking” to the bottom the windows, especially when resizing.

Recently I had the problem again. So I searched the internet (try with “sticky footer”) and I found some resources like ryanfait.com/sticky-footer, cssstickyfooter.com, and more.
So the problem is so common that it deserves no less than a dedicated website (cssstickyfooter.com). Those solution implements some hack, probably to support legacy browsers.

So I implemented my own, which is cross browser, but I have no idea if it works on prehistoric browsers.

I put together the html and the css, and here it is:

<html>
<head>
<title>Sticky footer example</title>
<style type="text/css">
html,body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.footer {
	border-top: 1px solid #EBEBEB;
	bottom: 0;
	position: absolute;
	height: 35px;
	width: 100%;
}
</style>
</head>
<body>
	<div class="footer">This is the sticky footer</div>
</body>
</html>

Try it here.

You can resize the window, and the footer is always at the very bottom. Awesome.

Now, if you want to have an header at the top, the footer at the bottom and the content in the middle, here is a template from which you can start:

<html>
<head>
<title>Sticky footer example</title>
<style type="text/css">
html,body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.header {
	border-bottom: 1px solid #EBEBEB;
	position: absolute; height : 35px;
	width: 100%;
	height: 35px;
}

.footer {
	border-top: 1px solid #EBEBEB;
	bottom: 0;
	position: absolute;
	height: 35px;
	width: 100%;
}

.content {
	position: absolute;
	top: 50%;
	margin-top: -15px;
	width: 100%;
}

div {
	line-height: 2em;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}
</style>
</head>
<body>
	<div class="header">This is the header</div>
	<div class="content">This is the content</div>
	<div class="footer">This is the sticky footer</div>
</body>
</html>

Try it here.

As you can see, the html is pretty clean; you don’t need to do magic tricks: they are just 3 divs in sequence: header, content, footer.

I tried the above code on latest version of Firefox, Opera, Chrome and Safari. For IE, please ask someone else :-)

CSS is definitely tricky, and it’s funny that it’s so hard to get a sticky footer, or that vertically center some text in a div can be so complex nowadays…

 

 

 

Published at DZone with permission of Luigi Viggiano, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)