Question

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

页脚需要粘性，我按照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>

Answer 1

我总是使用CSSStickyFooter method。

HTML，基本骨架

<div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

CSS，这只是一个片段

* {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;}

Answer 2

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

粘性页脚未放置在底部

2 个答案: