Platinum Partner
css,web design,tips and tricks

The “Sticky Footer” Problem

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 {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

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

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}