IE6 does not support fixed positioning, after setting the fixed location, IE6 will be considered as the error value, will use the default value of static, you can use absolute to simulate the fixed effect, and compatible with IE 7 8 9 and Firefox.
Core code:
Html,body {
margin:0;
padding:0;
height:100%;
}
HTML {Overflow:hidden;}
body {Overflow:auto;}
#demo {Position:absolute;}
Principle:
Html:firefox,opera,safari default is 8,chrome the 0,ie series by default is the height of the viewable area.
BODY:FIREFOX,OPERA,SAFARI,CHROME,IE8 and above default is 0,IE6 and 7 default is 19.
The default HTML and body height varies with the content, when the HTML is set to 100%, and after the part is hidden, the document size is only one screen height, the outside part is not displayed, there is no scroll bar, and the body is the content area, the body is set 100%, and the content beyond the automatically generated scroll bar, so, In fact, the content of the scroll bar after the appearance of the body, the default browser appears to simulate the scroll bar. This allows the element to be absolutely positioned relative to the 0 0 coordinates of the entire viewable area of the browser, while the content exceeds the body-based scroll bar, and the body height is set to the same height as the viewable area. So even if you drag the scroll bar, the position of the element that is absolutely positioned will not change.
Note: The HTML and body padding and margin values must be cleared, otherwise the phenomenon can not fill the browser, and the HTML and body can not be set width, even if the settings width:100% also problems, IE6 to the right there will be a part of the blank can not fill the browser. You need to set the Position:absolute for fixed positioning elements.
Cases:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> use absolute to simulate fixed positioning, compatible with IE6, and IE7 8 9 and Firefox Google and other browsers </title>
<style type= "Text/css" >
Html,body {
margin:0;
padding:0;
height:100%;
}
HTML {Overflow:hidden;}
body {overflow:auto; background:red;}
#box {
width:500px;
height:300px;
Position:absolute;
top:50%;
left:50%;
Margin: -150px 0 0-250px;
Background:blue;
}
</style>
<body>
<div id= "box" > Fixed content </div>
<div style= "height:3000px" >
<p> scrolling Content </p>
<p> scrolling Content </p>
<p> scrolling Content </p>
<p> scrolling Content </p>
<p> scrolling Content </p>
<p> scrolling Content </p>
<p> scrolling Content </p>
</div>
</body>
Use absolute to simulate fixed positioning, compatible with IE6, and IE7 8 9 and browsers such as Firefox Google
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
