放大时，为什么页脚与前面的内容重叠
这是示例 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;
}
here is the sample html:
<div id = "mainWrapperDiv">
<div id = "mainDiv">
<div> testing </div>
</div>
</div>
<div id = "footerDiv">
</div>
its 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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您使用什么粘性页脚？你的代码是什么样的？您可以尝试
http://www.cssstickyfooter.com/
What sticky footer are you using? What does your code look like? You could try
http://www.cssstickyfooter.com/
因为位置设置为相对。还有
margin-bottom: -200px;Because the position is set to relative. and also the
margin-bottom: -200px;这是因为
#mainWrapperDiv中的margin-bottom。如果你把它拿出来，它似乎工作正常。看看http://jsfiddle.net/kA6XJ/It's because of your
margin-bottomin the#mainWrapperDiv. If you take that out it appears to work okay. Check it out http://jsfiddle.net/kA6XJ/