3

这是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/

4

2 回答 2

2

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

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

于 2011-08-20T22:19:54.807 回答
0

通过查看您的代码，它让我想起了一个教程……经过 2 分钟的搜索，它是：

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

根据您的 HTML 结构，它就像您想要的那样:)

希望能帮助到你！

于 2011-08-20T21:20:37.813 回答