2

我有一个“主要部分” div，它设置为从其父 div 继承它的高度，即“包装器”div。包装器 div 设置为从其父 div 继承它的高度，它是文档的主体。和标签设置html为。 因此，为了使用 CSS “sticky footer”（可在http://www.cssstickyfooter.com/找到），我必须在“main-section” div 中设置等于“footer” div 的高度（它必须在包装器 div之外）。然后，页脚 div 也必须被赋予一个等于页脚高度的 负值。 所有这些都是为了将​​页脚保持在页面底部，bodyheight: 100%

padding-bottom margin-top

100%到页脚，以便background-color主要部分在整个页面下方可见。

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

似乎padding-bottommain-section div 中的必要参数导致了这个问题，即使页脚设置为clear: bothand position: relative（这确实将页脚保持在页面底部，但 main-section 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 中测试它。

4

3 回答 3

1

这里给你一个参考。

现场演示

于 2012-06-26T06:30:36.220 回答
0

在页脚中进行更改

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

更新了 Jsfiidle 演示

于 2012-06-26T05:51:08.157 回答
0

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

我没有弄乱嵌套的主要部分background-colordiv postion: absolute，而是position: fixed将分）。

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

于 2012-07-06T04:22:19.880 回答