问题
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;
}
回答1:
What sticky footer are you using? What does your code look like? You could try
http://www.cssstickyfooter.com/
回答2:
Because the position is set to relative. and also the margin-bottom: -200px;
回答3:
It's because of your margin-bottom
in the #mainWrapperDiv
. If you take that out it appears to work okay. Check it out http://jsfiddle.net/kA6XJ/
来源:https://stackoverflow.com/questions/4764500/when-zooming-in-how-come-the-divs-overlap-each-other