html - 如何在不覆盖内容的情况下粘贴页脚？

Question

div.footer {

    position: absolute;
    background: silver;
    height: 200px;
    bottom: 0;
}

我已将页脚贴在页面底部，但如果内容很长，它会被此页脚覆盖，如何避免这种情况？

Answer 1

您可以在内容区域的底部添加与页脚高度相同的边距。看看这个 fiddle :http://jsfiddle.net/X3B4c/2/

HTML:

<div id="content">
    <!-- many lines -->
</div>
<div id="footer">&copy; 2014 SomeCompany Inc.</div>

CSS:

#content {
    height: 100%;
    margin-bottom: 30px; /*same as #footer's height*/
    background: #555;
}
#footer {
    position: fixed;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background: #999;
}