HTML 粘滞页脚问题答案

【问题标题】：HTML Sticky Footer ProblemHTML 粘滞页脚问题
【发布时间】：2011-09-21 13:16:43
【问题描述】：

试图实现“粘性”页脚，但它没有按计划工作。它将它扔到底部，并在第一次滚动时按预期工作（除了它显示一个内部滚动条）。向上滚动时，提示页脚不会立即消失，需要滚动几下然后似乎回到“底部”。所以我的问题是如何始终将页脚保持在底部并消除内部滚动条。我想知道我的绝对定位在 main-content-inner 上是否有问题。该 div 的高度是可扩展的。

代码如下：

<div id="page-wrap">
  <div id="main-content>
    <div id="main-content-inner></div>
  </div>
  <div class="footerpush"></div>
</div>
<div id="footer">copyright info</div>


#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
position:relative;
overflow:auto;

}
#main-content {
width: 100%;
height:100%;
margin-left: -295px;
position:relative;
}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;
}
#footer {

text-align: right;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
color: #A7A9AC;
font-size: 12px;
height:20px;

}

.footerpush
{
height:20px;
}

如果我从页面换行中删除溢出自动，页脚实际上会移动到我的页面换行 div 的底部。所以看起来因为我的绝对主要内容内部是绝对的，它正在我的包装器之外扩展？如果我在页面换行的高度上设置了一个固定值，页脚会按应有的方式移动到底部。所以这是真正的问题，即使是可展开的内容，我如何将页脚保持在页面底部？

进一步的研究表明，当我在页面换行时将溢出设置为隐藏时，我的绝对内容“main-content-inner”会被切断。如何让 page-wrap 的高度扩展到 main-content-inner 的高度，不管它是什么？

【问题讨论】：

如果对您有帮助，请参阅ryanfait.com/sticky-footer。
该教程是我的代码的基础。我已经相应地实施了它（我认为）。是我的可展开内容（绝对）导致了问题吗？
不设置高度，内容有扩展能力。

标签： html css

【解决方案1】：

正如我回答here，你可以使用http://www.cssstickyfooter.com/：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body {
                height: 100%;
                padding: 0;
            }

            #wrap {
                min-height: 100%;
            }

            #main {
                overflow:auto;
                padding-bottom: 150px; /* must be same height as the footer */
            }

            #footer {
                position: relative;
                margin-top: -150px; /* negative value of footer height */
                height: 150px;
                clear:both;
            } 

            /*Opera Fix*/
            body:before {
                content:"";
                height:100%;
                float:left;
                width:0;
                margin-top:-32767px;/
            }
        </style>
        <!--[if !IE 7]>
        <style type="text/css">
            #wrap {display:table;height:100%}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="wrap">
            <div id="main">
                <div id="content">
                    <!-- Main content here -->
                </div>
            </div>
        </div>
        <div id="footer">
            <!-- Footer content here -->
        </div>
    </body>
</html>

您可以在此处查看一个工作示例：http://jsfiddle.net/dZDUR/

将右侧“结果”窗格的大小调整为比文本更短/更高查看滚动条出现/消失。

根据CSS Sticky Footer how-to，您可以插入正常的 main div 内的“列”布局。

【讨论】：

我试过了，但即使我只喜欢正文中的一行，我也会得到滚动条。

【解决方案2】：

试试这个：

像这样重写你的HTML 代码：

<div id="page-wrap">
  <div id="main-content">
    <div id="main-content-inner">
    </div>
  </div>
  <div class="footerpush"></div>
  <div id="footer">copyright info</div>
</div>

并重写您的 CSS 文件样式属性：

html,body
{   height:100%;
    padding:0;
    margin:0;
}
#page-wrap {
width:100%;
min-height:100%;
position:relative;
overflow:auto;

}
#main-content {
    background:#FF0;
    padding-bottom:40px;
}
#main-content-inner {

border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
}
#footer {

text-align: right;
color: #A7A9AC;
font-size: 12px;
height:20px;
position:absolute;
bottom:0;
width:100%;
}

.footerpush
{
    position:absolute;
    bottom:20px;
    height:20px;
    width:100%;
}

【讨论】：

【解决方案3】：

对我来说，这个网站是如何将页脚粘在网页末尾的最佳示例。

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

【讨论】：