Question

这是html

<div id = "wrapper" class = "selfclear">
    <div id = "contentDiv" class = "selfclear"> 
    </div> <!-- End contentDiv --> 
</div> 

<div id = "footerDiv" class = "selfclear"> 
</div> <!-- End footerDiv -->

这是css：

    *
 {
    margin: 0; 
    padding: 0; 
    border: 0;
}  

.selfclear:after 
{
    content:                ".";  
    float:                  left;
    display:                block;
    height:                 0;  
    clear:                  both;   
    visibility:             hidden;
}  

html, body
{
    height:                 100%; 
}  

#wrapper   
{ 
    width:                  100%;
    min-height:             100%; 
    background:             url( "../images/landing_page_bg.png" );
}  

#contentDiv
{  
    padding-bottom:         340px;
    overflow:               auto;
    border:                 1px solid green;
    width:                  1000px;
    margin-left:            auto;
    margin-right:           auto; 
    height:                 500px; 
} 

#footerDiv
{
    position:               relative;
    width:                  99.9%;
    clear:                  both;     
    height:                 340px;
    margin-top:             -340px;
    border:                 1px solid green;
    background:             url( "../images/landing_page_footer.png" )no-repeat;
    background-size:        100%; 
}

基本上在浏览器中放大/缩小时，粘性页脚会覆盖顶部内容，为什么以及如何阻止它执行此操作，谢谢。

以下是工作环境中的代码。

http://jsfiddle.net/9X753/

Answer 1

在这种情况下，你不能说你的页脚是“粘性的”。我建议您阅读本教程：http://www.alistapart.com/articles/footers/

我正在使用这种方法并且效果很好。

Answer 2

通过查看您的代码，它提醒我一个教程......经过2分钟的搜索，这里是：

http://www.cssstickyfooter.com/using-sticky-footer-code.html

根据HTML的结构，它就像你想要的那样：）

希望它有所帮助！

为什么粘性页脚会在调整大小时重叠顶部内容

2 个答案: