將div擴展到頁面底部不起作用

Question

我一直試圖修復這個div的長度一段時間，我確信它是完全簡單的東西，只是沒有看到它。 內容“頁面”的div擴展到頁腳之外，我可以用css中的min-height屬性來操作長度，但是我想確保頁腳/“頁面”div延伸到底部而不管內容如何我不想為div設定一個明確的長度。

編輯 ：jsfiddle： http ： //jsfiddle.net/F2SMX/

頁腳cs

#footer {
    background: #365F91;
    color: #000000;
    width:100%;
    height: 35px;

    position:relative;

    bottom:0px;
    clear:both;
}

#footer p {
    margin: 0;
    text-align: center;
    font-size: 77%;
}

#footer a {
    text-decoration: underline;
    color: #FFFFFF;
}

#footer a:hover {
    text-decoration: none;
}

將頁腳位置從相對位置更改為絕對位置沒有任何變化

Answer 1

relative對於absolute更改，並從#page刪除min-height 。

#footer { position: absolute; }

您還需要確保你只有1個#page每頁。

工作小提琴 。

Answer 2

你想使用一種叫做粘性頁腳的東西。

http://css-tricks.com/snippets/css/sticky-footer/

或者你可以使用我的解決方案而不使用偽類:after

編輯：對不起，你有解決問題的解決方案而不是http://codepen.io/anon/pen/LsFIn

Answer 3

去老派.....把它添加到#footer CSS中

bottom: -500px;
padding-bottom: -500px;

工作演示

CSS

#footer {
        background: #365F91;
        color: #000000;
        width:100%;
        height: 80px;
        position:relative;
        bottom: -500px; /* push to the bottom */
        padding-bottom: -500px; /* maintain equilibrium by giving footer its height!!*/
    }

編輯

如果內容超過，則使頁腳伸展到高度

演示

#footer {
        background: #365F91;
        color: #000000;
        width:100%;
        min-height: 80px; /*change height to min-height, this will always cover the content height*/
        position:relative;
        bottom: -500px;
        padding-bottom: -500px;

    }

如果內容超出，則需要可滾動頁腳

演示

#footer {
        background: #365F91;
        color: #000000;
        width:100%;
        height: 80px; /*keep height fixed*/
        overflow-y:scroll; /*scroll when content size increases */
        position:relative;
        bottom: -500px;
        padding-bottom: -500px;

    }