Css 放大时，为什么页脚与前面的内容重叠

以下是示例html：

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

---

因为位置设置为相对。以及

页边距底部：-200px

这是因为

#mainWrapperDiv

中的

页边距底部。如果你把它拿出来，它看起来很好用。查看一下
您使用的粘性页脚是什么？你的代码看起来像什么？你可以试试

我取出了亲戚，但仍然有问题。margin-bottom:-200px；这可能也没用。换一种方式做吧，因为这就是问题所在。它在什么方面没用？对我来说，绿色似乎不再与蓝色重叠…更不用说，如果你去掉负边距，它将使页脚不会粘到底部或基本上粘在主要内容的末尾。请准确描述你在这里试图实现的目标。目前，使用我的小提琴，绿色div的高度保持在20em，而蓝色div的高度保持在200px。在Chrome和IE中，看起来绿色将停留在最顶部，蓝色将停留在最底部。如果窗口大于200px+20em，则会将其作为中间的空白抛出，但如果窗口较小，则不会与两者重叠。我真的很想帮你，所以请多给我一点帮助。你试过放大而不是调整浏览器窗口的大小吗？我想这就是你没有抓住我的重点的地方。是的，我确实做到了，事实上，这是我使用的粘性页脚代码，当放大网页时，它仍然与div重叠，而不是调整浏览器窗口的大小，放大。在Chrome中不会发生这种情况。你在用什么浏览器？好的，你试过放大吗？尝试ie或opera并放大很多，最终，使用上面的代码，粘性页脚和其他div将重叠。对不起，我现在没有安装ie或opera，因此无法复制它。但是，如果您/真的/非常关心这个问题（我认为您不应该这样），并且坚持认为它应该在IE中工作，我会建议一个面向jQuery的解决方案，动态调整高度和位置。这很粗糙，但会有用的。
*
{
    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;
}