将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，然后从min-height移除#page。

#footer { position: absolute; }

您还需要确保每页只有1 #page。

Working fiddle

Answer 2

你想使用一种叫做粘性页脚的东西。

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

或者您可以在不使用伪类:after

的情况下使用我的解决方案

编辑：对不起，您在解决问题时解决了div而不是http://codepen.io/anon/pen/LsFIn

之后的问题

Answer 3

去上学.....将此{c}添加到#footer

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

working demo

<强> 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!!*/
    }

修改

如果内容超出

，则将页脚拉伸到高度

demo

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

    }

如果内容超出

，则需要可滚动的页脚

demo

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

    }