html - ページ下部のフッター

Question

フッターをページの下部に配置したいのですが、機能しません。常にスクロールバーがありますが、それはなぜですか？

#top {
position: relative;
width: 100%;
height: 50px;
background: #00aeef;

}

#wrapper {
position: relative;
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;

}

#footerbg {
width: 100%;
height: 20px;
background: #d7d7d7;

}

.push {
height: 20px;

}

<div id="top"></div>
<div id="wrapper">
    <div class="push"></div>
</div>
<div id="footerbg"></div>

score 0 · Accepted Answer

更新されたバージョンを試してください：http：//jsfiddle.net/F577v/8/

まず第一に、あなたのコンテナは相対的な位置である必要はありません。次に、幅と左右の余白を自動に設定して、フッターを中央に配置する必要があります。

#footerbg {
    width: 960px;
    ....
    margin-left: auto;
    margin-right: auto;
}

score 0 · Accepted Answer

ラッパーはコンテンツのコンテナである必要があります

こちらをご覧ください：http：//jsfiddle.net/F577v/

<div id="top"></div>
<div id="wrapper"> 
    <div id="content"><p>content here</p></div>
</div>
<div id="footerbg"></div>

</ p>

フッターをラッパーの外側の下部にスナップさせました。上部を外側に移動する場合も問題ありませんが、下部のパディングを調整して、その高さも補正する必要があることを忘れないでください。

ここで更新されたコードを表示します：http：//jsfiddle.net/F577v/2/

score 0 · Accepted Answer

2つのオプションがあります：

1）footerbg中に入れますwrapper

2）footerbgラッパーと同じスタイルで配置します（同じ幅とマージンの値）

3 に答える 3