<!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>Untitled Document</title> <style type="text/css"> *{margin:0;padding:0}/* quick and dirty reset for demo only - use a proper reset */ html,body{height:100%} h1,p{margin:0 0 1em 0} body{text-align:center;} #outer{ width:600px; min-height:100%; margin:auto; border:1px solid #000; border-top:none; border-bottom:none; position:relative; text-align:left; background:#ffffcc; } * html #outer{height:100%}/* for ie6 and under who will just get an absolute footer instead */ #base{ position:fixed; bottom:0; height:50px; width:600px; background:red; } p.last{ padding-bottom:60px;/*make final text appear above footer */ } </style> <!--[if lte IE 6]> <style type="text/css"> html{background:url(fake.gif) no-repeat 0 0}/* use a 1px x 1px transparent gif which cures the jitters on the footer when using this expression*/ #base {position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));} </style> <![endif]--> </head> <body> <div id="outer"> <h1> Fix your CSS</h1> <p> A small example of using position:fixed in compliant browsers (not IE6 and under)</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p> scrolltest</p> <p class="last"> scrolltest</p> <!-- add more elements to test scrolling--> <div id="base"> Fixed base to centered element</div> </div> </body> </html>
