當放大時，爲什麼頁腳重疊其前述內容

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/