CSS“粘性页脚”与嵌套div的百分比高度冲突？

Question

我有一个“main-section”div设置为从它的'父div继承它的高度，它是“包装”div。包装器div设置为从其父div（它是文档的主体）继承它的高度。 html和body代码设置为height: 100%。

所以，为了使用CSS“粘性页脚”（在http://www.cssstickyfooter.com/找到），我必须在“main-section”div中设置padding-bottom等于“footer”div的高度（它必须是包装器div的外部。然后，页脚div必须被赋予负 margin-top值，该值也等于页脚的高度。

所有这一切都是为了将​​页脚保持在页面底部，但我试图将主要部分100%的高度扩展到页脚，以便主要部分的background-color在页面的整洁性下可见。

我接近这样做，除了主要部分现在超出页脚，并将窗口拉伸超过100％高度（当没有足够的内容超过页面高度），然后背景颜色可见页脚，超出页面的高度（这是不可取的）。

似乎主要部分div中padding-bottom的必要参数导致此问题，即使页脚设置为clear: both和position: relative（ 将页脚保持在页面底部，但主节div仍然在页脚下方延伸很多）。或者包装器的min-height: 100%属性可能导致冲突？

这是相关的html：

<div id="wrap">

    <div id="header">
        ...
    </div> <!-- end of header -->

    <div id="main-section">
        ...
    </div> <!-- end of main section -->

</div> <!-- end of wrapper -->

<div id="footer">
    ...
</div> <!-- end of footer -->

......这是相关的CSS：

*
{
    margin: 0px;
    padding: 0px;
}

html, body
{
    height: 100%;
}

body
{
    background-color: #bbb;
}

#wrapper
{
    /* wrapper 100% of screen */
        min-height: 100%;

    height: inherit;

    width: 950px;
    margin-left: auto;
    margin-right: auto;
}

    #header
    {
        background-color: #C97;
        line-height: auto;
        text-align: center;

        font-family: "Lucida Console";
        font-weight: bold;
        font-size: 2.5em;
    }

    #main-section
    {
        background-color: #ddd;

        height: inherit;

        /* for a "sticky" footer */
        padding-bottom: 50px; /* equal to the height of the footer */
    }
    #footer
    {       
        clear: both;
        position: relative;

        height: 50px;
        line-height: 50px;
        margin-top: -50px; /* equal to the height of the footer, for a "sticky footer" */

        width: 950px; /* equal to width of wrapper */

        margin-left: auto;
        margin-right: auto;

        text-align: center;

        background-color: #C97;
    }

<小时/> 编辑：重要的是要提到我在Firefox中测试它。

---

Answer 1

Here是您的参考。

LIVE DEMO

Answer 2

更改页脚

#footer
{       
    bottom:0px;
    width:100%;
    height:50px;
    position:fixed;  // this is the key
    height: 50px;
    line-height: 50px;
    width: 950px;
    background-color: #C97;
}​

<强> Updated Jsfiidle demo

Answer 3

所以，一种解决方法，表现出相同的行为 -

我没有弄乱嵌套的主要部分div，而是将background-color应用于包装器div本身（并且还没有将postion: absolute应用于主要部分div，但仍然应用position: fixed到页脚div）。

这样，主要部分可以包含任何数量的内容，并且它看起来具有100％高度的背景颜色。