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

【问题标题】：CSS "sticky footer" conflicting with percentage height of nested divs?CSS“粘性页脚”与嵌套div的百分比高度冲突？
【发布时间】：2012-06-27 10:01:23
【问题描述】：

我有一个“主要部分” div，它设置为从其父 div 继承它的高度，即“包装器”div。包装器 div 设置为从其父 div 继承它的高度，它是文档的主体。 html 和 body 标签设置为 height: 100%。

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

所有这些都是为了将页脚保持在页面底部，但我正在尝试将主部分的高度 100% 扩展到页脚，以便主部分的 background-color 在下方可见整个页面。

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

即使页脚设置为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 中进行测试。

【问题讨论】：

标签： css height percentage sticky-footer html

【解决方案1】：

修改页脚

#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

【讨论】：

感谢@Wasim 的帮助，但在您的示例中，主要部分 div 的background-color 没有延伸到页脚，也没有延伸到页面的整个高度......这就是我我被困住了。
嗯，好的，好的，谢谢@Wasim，所以这是否与将主部分 div 设置为 position: absolute 和页脚 div 设置为 position: fixed 有关？我可以看到它在您的示例中有效，但我无法修改我的代码以反映相同的更改..
我刚刚想出了一个解决方法，它表现出相同的行为——我没有弄乱嵌套的主要部分 div，而是将背景颜色应用于包装器本身（也没有应用postion: absolute 应用于主要部分，但仍将position: fixed 应用于页脚）。这样，主部分可以包含任意数量的内容，并且它看起来有 100% 高度的背景颜色。

【解决方案2】：

Here 是您的参考。

LIVE DEMO

【讨论】：

这很酷，感谢@tusar 提供的信息。这给了我一些有趣的想法——我想制作一个带有粘性标题的页面，该标题出现 onmouseover，消失 onmouseout，并带有一些 jQuery 动画（我敢打赌有一个 jQuery 解决方案）。

【解决方案3】：

因此，一种解决方法，表现出相同的行为——

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

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

【讨论】：