What is the cross-browser solution for this?
It depends what you mean by fixed footer as people often confuse a fixed positioned footer with a sticky footer?
A fixed footer is one that sits on the bottom of the viewport at all times no matter how long the document is but may obscure content if it is in the way. A sticky footer is a footer that sits on the bottom of the viewport when content doesn’t reach the fold but then sits at the bottom of the document when the content goes below the fold.
If you want a sticky footer then this is the best solution (it’s mine and i’ve been using it for years 
).
If you meant a fixed positioned footer then there is no secret technique. You just place the footer using position:fixed with bottom:0;left:0;right:0;. You will need to ensure that the last content on the page (apart from the footer) has some bottom padding equal to the height of your fixed footer or you will never be able to scroll to see that last piece of content as it will be obscured by the footer.
I can’t see the code you used there Paul on my ipad. I messed with css3 sticky footers a long time ago. Should still be relevant. I remember zero how I did it. I’d have to study the code as well lol. http://www.websitecodetutorials.com/code/css/css3-sticky-footer.php
Here’s the code from the demo:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- html5 shiv for IE8 and under -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- If you aren't using jquery you can use the body element instead (body{width:100%;display:table;height:100%})of the #wrap div as jquery has a bug (
http://bugs.jquery.com/ticket/7261) in webkit when the body is display:table. -->
<style>
html, body,#wrap {margin:0; padding:0; height:100%;}
#wrap {display:table;width:100%}
/* if ie7 support is needed then set height of #wrap and header and footer to auto in CC's and just let it have a normal layout (or: *+html #wrap{height:auto})*/
.content { background:#ccc; }
header { background:#999; color:#fff; text-align:center; padding:10px 0}
header, .footer, main { display:block}/* ie7 and under*/
header, .footer, main { display:table-row }
/* height 1px on the header and footer is the sticky footer technique and allows the content to stretch from header to footer*/
header, .footer{height:1px}
h1{padding:10px;margin:0;}
.footer {background:#999; color:#fff; text-align:center;}
.footer p { margin:0; padding:10px}
</style>
</head>
<body>
<div id="wrap">
<header><h1>Fluid Height Sticky footer simple - IE8+ (no hacks )</h1></header>
<main class="content">Content</main>
<footer class="footer"><p>Sticky footer</p></footer>
</div>
</body>
</html>
This is the only version of the sticky footer that I use these days as all others fail in responsive web design.
I actually use the above on all the pages I design by default these days as it is so successful at doing what it does. If you don’t want the sticky behaviour you just remove the heights from the css - as simple as that.
Display table and table-cell are a staple diet of my layouts these days now that full support for IE7 and under can be dropped. They produce much more reliable behaviour than floats with the benefit of automatic equalising columns.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.