Over a million developers have joined DZone.
Silver Partner

The “Sticky Footer” Problem

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with JetBrains. Produce high quality code with no additional effort, thanks to state-of-the-art code analysis, on-the-fly error prevention with PhpStorm.

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…

 

 

 

The Web Dev Zone is brought to you in partnership with JetBrains. Streamline your workflow by integrating with everything you need for productive development with WebStorm.

Topics:

Published at DZone with permission of Luigi Viggiano , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}