当放大时，为什么页脚重叠其前述内容

Question

这里是样品HTML：

<div id = "mainWrapperDiv"> 
    <div id = "mainDiv"> 
     <div> testing </div> 
    </div> 
</div> 
<div id = "footerDiv"> 
</div> 

它的CSS：

* 
{ 
    padding:   0px; 
    margin:    0px; 
} 

body, html 
{ 
    height:    100% 
} 

div 
{ 
    border:    none; 
} 

#mainWrapperDiv 
{ 
    min-height:   100%; 
    height:    100%; 
    margin-bottom:  -200px; 
} 

#mainDiv 
{ 

    margin:    0px auto 0px auto; 
    width:    1000px; 
    min-height:   500px; 
    background:   lightgreen; 
} 



#footerDiv 
{ 
    height:    200px; 
    width:    100%; 
    position:   relative; 
    clear:    both; 
    background:   lightblue; 
} 

Answer 1

你使用什么粘脚？你的代码是什么样的？你可以尝试

http://www.cssstickyfooter.com/

Answer 2

由于位置被设置为相对的。并且还有margin-bottom: -200px;

Answer 3

这是因为你的在#mainWrapperDiv。如果你把它拿出来，它似乎工作正常。看看它http://jsfiddle.net/kA6XJ/