Question

div.footer {

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

我已将页脚粘贴到页面底部，但如果内容很长，则会被此页脚覆盖，如何避免？

Answer 1

原因可能是因为您将位置设置为绝对值。你能链接html和css的完整编码吗？这可能有所帮助。

<!DOCTYPE html>
<html>
</html>
<head>
</head>
<body>

<header></header>
<section></section>
<nav></nav>
<aside></aside>
<footer></footer>

</body>

把它想象成一个3D物体，你的页脚正在你的元素或身体的前面。使用此结构。：）

Answer 2

您可以在内容区域底部添加与页脚高度相同的边距。看看这个小提琴：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;
}

Answer 3

你可以做的一件事就是使用位置：绝对使用位置：固定这将坚持这一点。

希望有所帮助

Answer 4

将position: absolute更改为position: fixed

<强> DEMO

div.footer {
    position: fixed;
    background: silver;
    height: 200px;
    bottom: 0;
}

Answer 5

喜欢这个

<强> demo

<强> CSS

*{
    margin:0;
    padding:0;
}
div.footer {

    position: fixed;
    background: silver;
    height: 200px;
    bottom: 0;
    width:100%;
}

Answer 6

使用z-index属性 img. {position:absolute; top:0; z-indez:-1;}

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

6 个答案: