css - フッターの位置 - 下と中央

Question

ページの下部に固定フッターがある Web ページを作成しています。ページのコンテンツには特定の幅があり、中央に配置されます。フッターにも特定の幅があり、中央に配置する必要があります。

問題：

1. 使えpostiton: fixedません - フッターが中央にありません
2. ページのコンテンツはデータベースから動的に読み込まれるため、正確な高さはわかりません
3. ブラウザー ウィンドウが非常に小さい場合、フッターがコンテンツに重なってコンテンツを覆います。体のz-index背景のように背景にグラデーションを設定しているため、ほとんど修正されません。

だから私はfloat: bottom.... のようなものが必要になるでしょう。

Answer 1

他の答えは機能しますが、負のマージンの使用は避けるべきです。

これを試して：

.footerholder {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    position: fixed;
    text-align: center;
    width: 100%;
}

.footer {
    background: none repeat scroll 0 0 blue;
    height: 100px;
    margin: auto;
    width: 400px;
}

HTML は次のようになります。

<div class="footerholder">
    <div class="footer">
    ....
    </div>
</div>

- - - - - 編集 - - - - - -

また、フッターの高さを考慮して、ページ全体のサイズを修正する必要があります。そうしないと、下部のコンテンツが表示されません。

Answer 2

.footer{
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-200px; /*negative half the width */
    background:red;
    width:400px;
    height:100px;
}

http://jsfiddle.net/qdVbR/で実際の例を確認してください