将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;

    }