100% 宽的页脚，在主包装之外，必须延伸到页面底部答案

【问题标题】：100% wide Footer, outside main wrap, must extend to bottom of page100% 宽的页脚，在主包装之外，必须延伸到页面底部
【发布时间】：2013-08-15 09:02:03
【问题描述】：

有很多信息可以让页脚 100% 宽或将 100% 扩展到浏览器底部。

我的问题有点不同。

我网站的所有内容都包含在最大宽度容器中。但是客户希望页脚是 100% 宽，然后如果页面信息很短，页脚必须伸展到页面底部。

所以我必须把页脚放在主容器之外，这样它才能穿过页面的宽度。但这意味着我不能使用

html , body {height:100%;}

选项，因为将页脚设置为 100% 高将无济于事，因为它位于主容器之外。

那么，忽略主容器，如果页面太短而无法从上到下填充屏幕，我如何告诉独立的 100% 宽页脚填充到浏览器底部的页面？如何让页脚填补底部的空白？

这是代码的简单副本：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style>

    #main {
        height: 100px;
        max-width: 900px;
        background-color: blue;
        margin: auto;
    }

    footer {
        width: 100%;
        background-color: lightblue;
        color: white;
    }

</style>

</head>

<body>

        <div id="main">
        </div>

        <footer>
            Footer content
        </footer>

</body>
</html>

如何让浅蓝色页脚一直到底部？

请注意，我不希望页脚粘在底部，我需要它从页面底部的任何位置延伸到浏览器的底部。

【问题讨论】：

#main 会一直是height:100px;吗？
啊，好问题。不，#main 的高度会根据内容而有所不同。
你愿意添加jQuery库吗？
当然。没想到。
我已经编辑了我的答案并添加了一个 jsFiddle 演示，向您展示它完全符合您的要求。

标签： html footer

【解决方案1】：

jsFiddle DEMO

//css //
footer {
    width: 100%;
    background-color: lightblue;
    position:absolute;
    color: white;
    bottom:0;
}

// jQuery //
$(function () {
    var mainHt = $('#main').height();
    $('footer').css('top', mainHt);
});

【讨论】：

Thanx DevlshOne，您的演示有效，但是当我将它应用到更复杂的站点时，我正在构建各种错误，可能与我所做的大量其他 CSS 样式有关。但我会保留您的代码以供进一步通知。