4

したがって、私のコードにはスティッキーフッターがあります。スティッキー フッターには #wrap コンテナーがあり、min-heightが100%. ただし、wrap div 内のオブジェクトにmin-heightは使用できません。height:100%

だから私は追加height:100%しますが、ウィンドウの高さが小さすぎるとフッターがラップ div のコンテンツをロールオーバーすることで、レイアウトが乱れます。

誰でもこれを修正できますか？

<div id="wrap">
    <div id="main">
        <div id="content">

        </div>
    </div>
    <div class="clearfooter"></div>
</div>
<div id="footer">

</div>

CSS:

*{
    padding: 0px;
    margin: 0px;
}
html, body {
    height: 100%;
}
body{
    color: #FFF;
    background-image:url('../images/black_denim.png');
}
#wrap {
    min-height: 100%;
    margin-bottom: -200px;
    position: relative;
}
#topBanner{
    width: 200px;
    margin: 0px auto;
}
.clearfooter {
    height: 200px;
    clear: both;
}
/* footer */
#footer { 
    position: relative;
    height: 200px;
    width: 100%;
    min-width: 960px;
}
4

1 に答える 1

1

必要なのが体の内容をまったく覆わない粘着性のあるフッターだけである場合は、フッターに固定位置を与え、体の下部のパディングをフッターの高さに等しくします。

body{ 
    padding-bottom:200px;
}

#footer { 
    position: fixed;
    bottom:0;
    height: 200px;
    width: 100%;
}

編集：

非常に小さな画面で固定フッターが画面の大部分を覆っていることが懸念される場合は、cssメディアクエリまたはjavascriptを使用してフッターを動的に非表示にすることを除いて、回避策はありません。

多くのモバイルブラウザは、画面の大部分をカバーするという問題があるため、固定位置を正確にサポートしていません。

于 2012-12-22T21:44:19.320 に答える