When zooming in, why does the footer overlap its preceding content

前提是你 提交于 2019-12-25 04:35:12

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!