html - css フッターがページの下部に表示されない

Question

フッターにこのcssを使用しています：

.footer {
    width:100%;
    background:#666666;
    clear:both;
    color:#FFFFFF;
}

.footer-container {
    display:block;
    width:80%;
    margin: 0 auto;
    overflow: hidden;
}

しかし、ページの下部にフッターを表示することはできません

ここにフィドルがあります：http://jsfiddle.net/z2pvC/

Answer 1

あなたが説明しているのは、スティッキーフッターと呼ばれるものです。問題を解決するには、次のリソースを参照してください。

Fixed your jsFiddle here

.

CSS 固定フッター*推奨

ライアン・フェイトの説明

クリス・コイヤーのソリューション

---

CSS スティッキー フッターソリューションを使用して jsFiddle を修正しました。

Answer 2

フッターを絶対にページの最後に配置するか、または を使用して固定しposition: fixedます。

最初のオプションを表す更新された JSFiddle は次のとおりです: http://jsfiddle.net/z2pvC/2/

関連するフッター CSS:

.footer {
width:100%;
background:#666666;
clear:both;
color:#FFFFFF;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-top: 20px;
}