粘性页脚未放置在底部答案

【问题标题】：Sticky footer is not placed at the bottom粘性页脚未放置在底部
【发布时间】：2013-01-30 09:52:46
【问题描述】：

我只是对页脚进行一些快速更改。

页脚需要粘性，我按照A List Apart方法描述的方法尝试让页脚停留在底部，但它似乎有点偏离。

html, body {
height: 100%;
 }
#container {
position: relative;
min-height: 100%;
}

<div id="container">
    <div id="content">...</div>
    <div id="footer">...</div>
</div>

【问题讨论】：

标签： html css cross-browser footer sticky-footer

【解决方案1】：

我总是使用CSSStickyFooter method。

HTML，一个基本的骨架

<div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

CSS，这只是一个sn-p

* {margin:0;padding:0;} 

html, body {height: 100%;}

#wrap {min-height: 100%;}

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

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

【讨论】：

【解决方案2】：

我认为您应该添加到#wrapper clearfix，在这种情况下将 height: 100% 添加到#wrapper 和#container，您会看到页脚低于应有的值。现在你应该将顶部设置为页脚的负高度，它应该可以工作。 Bo 我不知道它是否会涵盖包装器的内容。

【讨论】：

我查过了。它将涵盖内容。但是有了这个内容，它应该工作得很好。作为绝对定位也是如此。如果您有更多内容，请留下页脚而不进行任何定位。
如果我不添加任何定位，它就不会在主页的底部。啊！正如你所说，我已将 clearfix 添加到包装器中。
如果内容大于高度，我会这样做。