Example 1.
The following method can be perfectly implemented in IE6 support for fixed
Code:
The code is as follows |
Copy Code |
<! DOCTYPE html> <style type= "Text/css" > *{padding:0;margin:0;} html,body{_height:100%; _overflow:hidden;} body{_overflow:auto;} #header, #footer { width:100%; position:fixed; _position:absolute; Background: #eee; left:0px; } #content {background: #ccc;p adding:20px;} #header {top:0;} #footer {bottom:0;} </style> <body> <div id= "Header" >header</div> <div id= "Content" > <p> This is content </p> <p> This is content </p> <p> This is content </p> <p> This is content </p> <p> This is content </p> <p> This is content </p> <p> This is content </p> <p> This is content </p> <p> This is content </p> <p><script language= "JavaScript" > for (i=0;i<100;i++) { document.write (i+ "<br/>"); } </script></p> <p> This is content </p> <p> This is content </p> </div> <div id= "Footer" >footer</div> </body> |
2. To achieve a fixed div position, we let it in the head or the bottom
The code is as follows |
Copy Code |
<! DOCTYPE html> <style> *{padding:0;margin:0;} #header, #footer { width:100%; position:fixed; font-size:32px; Text-indent:1em; _position:absolute; Background: #eee; left:0px; } #left, #right {width:100px; height:300px; Background-color: #eee; line-height:300px; text-align:center; font-size:32px ; position:fixed; _position:absolute;} . header{width:100% Background-color: #eee; position:fixed;} #content {background: #f9f9f9; padding:20px; text-align:center; line-height:35px;} #header {top:0px;} #footer {bottombottom:0px;} #left {left:0px; top:200px; _margin-top:200px;} #right {rightright:0px; top:200px; _margin-top:200px;} </style> <body> <!--[if IE 6]> <style type= "Text/css" > Html,html Body{background-image:url (About:blank); background-attachment:fixed} #header, #left, #right { Position:absolute;bottombottom:auto;top:expression (eval (document.documentElement.scrollTop)); } #footer { Position:absolute; Top:expression (document.compatmode&&document.compatmode== "Css1compat")? Documentelement.scrolltop +documentelement.clientheight-this.clientheight-1:document.body.scrolltop+ document.body.clientheight-this.clientheight-1)); } </style> <! [endif]--> <div id= "left" >left</div> <div id= "right" >rightright</div> <div id= "Header" >header</div> <div id= "Content" > <p> <script language= "JavaScript" > for (i=0;i<100;i++) { document.write (i+ "<br/>"); } </script> </p> </div> <div id= "Footer" >footer</div> </body> |
Add this compatible IE6 code to the head.
The code is as follows |
Copy Code |
<!--[if IE 6]> <style type= "Text/css" > Html,html Body{background-image:url (About:blank); background-attachment:fixed} #header, #left, #right { Position:absolute;bottombottom:auto;top:expression (eval (document.documentElement.scrollTop)); } #footer { Position:absolute; Top:expression (document.compatmode&&document.compatmode== "Css1compat")? Documentelement.scrolltop +documentelement.clientheight-this.clientheight-1:document.body.scrolltop+ document.body.clientheight-this.clientheight-1)); } </style> <! [endif]-->
|
Fixed in head code
The code is as follows |
Copy Code |
#header, #left, #right { Position:absolute;bottombottom:auto;top:expression (eval (document.documentElement.scrollTop)); }
|
Fixed at bottom code
code is as follows |
copy code |
#footer { position:absolute; Top:expression (document.compatmode&& document.compatmode== "Css1compat")? Documentelement.scrolltop+documentelement.clientheight-this.clientheight-1: document.body.scrolltop+document.body.clientheight-this.clientheight-1); } |