0

Ryan Fait の Sticky Footer テクニックを実装するためにさまざまなテクニックを試してきましたが、どれもうまくいかないようです。ブラウザーが垂直方向に変化している場合、フッター コンテンツが常にメイン コンテンツに重なってしまいます。フッター内にネストされた固定位置の DIV が多数あることが原因である可能性があります。これらの DIV を親 DIV (#footer) の周りにラップすると、この親 DIV は表示されないように見えます。スタイルを適用してその位置 (およびその中のコンテンツ) を制御することもできません。

HTML:

<body>
<div class="wrapper">
<div id="content"> Juicy stuff goes here</div>
<div class="push"></div>
<div class="footer">

     <div id="print_blank"></div>
     <div id="logo"></div>
     <div id="nav_bar"></div>
     <div id="footerarea">Contains other Text</div> 

</div><!-- Footer Area -->
</body>

CSS:

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -240px;
}
.footer, .push {
    height: 240px;
}
#print_blank {
    padding-top: 0px;
    bottom: 160px;
    position: fixed;
    z-index: 11000;
    width: 100% !important;
    text-align: center;
    min-width: 980px;
}
#logo {
    width: 180px;
    padding-top: 5px;
    bottom: 86px;
    position: fixed;
    z-index: 9999999;
    left: 45px;
}
#nav_bar {
    padding-top: 0px;
    bottom: 77px;
    position: fixed;
    z-index: 99999;
    width: 100% !important;
    text-align: center;
    min-width: 980px;
}
#footerarea {
    bottom: 0px;
    position: fixed;
    width: 100%;
    padding-top: 20px;
    background-color: #F16924;
    height: auto;
    text-align: justify;
    min-width: 960px;
    z-index: 999999;
}

ありがとう！

4

1 に答える 1