为什么在调整大小

这里粘页脚重叠顶尖的内容是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/

来源

2011-08-20 dave