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 に答える