Over a million developers have joined DZone.

The “Sticky Footer” Problem

· Web Dev Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

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 by Stormpath—offering a complete, pre-built User Management API for building web and mobile applications, and APIs. Download our new whitepaper: "Build Versus Buy: Customer Identity Management for Web and Mobile Applications".

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 }}