将 div 扩展到页面底部不起作用答案

【问题标题】：Extending div to bottom of page not working将 div 扩展到页面底部不起作用
【发布时间】：2014-01-13 13:52:08
【问题描述】：

一段时间以来，我一直在尝试修复这个 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;
}

将页脚位置从相对位置更改为绝对位置没有变化

【问题讨论】：

图片：i.imgur.com/rnD53Na.png
请提供小提琴！！
以后可以使用jsfiddle.net。这对每个人都好得多。

标签： css html

【解决方案1】：

将relative 更改为absolute，并从#page 中删除min-height。

#footer { position: absolute; }

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

Working fiddle.

【讨论】：

如果我错了请纠正我......但我从问题中推断出页脚应该是可滚动的......你已经修复了它！

【解决方案2】：

去老学校.....把这个添加到#footer的css中

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;

    }

【讨论】：

可行，但我希望页脚保持在页面底部。如果内容低于页脚，我希望页脚贴在底部并滚动条显示内容。
你的意思是如果内容超过高度，你会希望在页脚中有一个滚动条？？
@user3036496 : 增加了 2 个变种...请检查 EDIT 部分是否有帮助！！
这并没有解决问题，只是没有显示，因为没有背景图像。一旦背景图像显示内容下的空白区域就消失了。无论上面的内容如何，我都希望将 div 扩展到页脚。我只希望背景图像显示在侧面，而中间是白色的内容，而不是在侧面添加 2 个额外的 div 来容纳背景
同上，页脚停留在同一个地方但没有背景图片你看不到 div 没有向下延伸到页脚

【解决方案3】：

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

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

或者你可以使用我的解决方案而不使用伪类:after

编辑：抱歉，这里有我解决 div 问题的方法，而不是在 http://codepen.io/anon/pen/LsFIn 之后

【讨论】：