Hi Eric,
We never used html:before in the demo and always used body:before so chrome would not be an issue with my original example.
Opera 11 does seem to have fixed the redraw issue though and needs a fix.
You can't put the 100% high float inside #wrap because then it may drag other floated content upwards with it. You can't remove the negative margin because then any content in the wrapper that is set to clear:both will disappear under the fold. That's what the large negative margin is for so that the float has no effect on content in the page.
All you needed to do was set the wrapper to clear:both in the original method of ours.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
margin:0;
padding:0
}
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
}
#outer {
width:760px;
background:#ffffcc;
margin:auto;
min-height:100%;
margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
text-align:left;
clear:both;
}
* html #outer {
height:100%
}
#header {
background:red;
border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
background:red;
width:760px;
margin:auto;
height:40px;/* must match negative margin of #outer */
clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
h1, h2, p {
padding:0 10px;
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1>Sticky Footer</h1>
</div>
<h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
<p>test</p>
<p style="clear:both">Element with clear:both added just for testing</p>
<p>test</p>
<p>test</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
Sticky Footer at Bottom
Of course the opera float could be removed completely if only opera 11 support is required.
Reply With Quote
Originally Posted by samanime
Bookmarks