Question

我尝试了一堆粘性页脚，但它们似乎都没有正常工作。如何做到这一点的逐步解释将是伟大的。

我想要实现的目标是在页面底部有一个页脚（大小为一行 - 20px）STICK。换句话说，如果内容不多，它将位于页面的底部，而不是页面的一半（我已经实现了这一点）。但是，如果有很多内容，它不会尴尬地放在内容之上，它将位于内容下方页面的底部。

以下是我所做的相关代码：

CSS：

    #footer {
font: 12px Georgia, "Times New Roman", Times, serif;
color:#FFF;
background-color:#999;
opacity:1;
text-align:bottom;
position:absolute;
bottom:0;
width:100%;
height:20px;
line-height:20px;
}

HTML：

<div id="footer" align="center" > Terms of Service &nbsp;&nbsp;&nbsp| &nbsp;&nbsp;&nbsp© 2014 (Blank) &nbsp;&nbsp;&nbsp| &nbsp;&nbsp;&nbspPrivacy Policy
</div>

如果您预览此代码，您将看到它确实按预期工作，它会粘在底部。只是如果你有太多内容，那么代码不会被推下来，它会在你打开网站时保持在页面底部。

Answer 1

使用位置：固定在页脚上并添加填充底部：20px到主体，这样页脚将始终位于底部，如果主体内容太大，填充将使其保持在页脚上方。 / p>

#footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 20px;
  text-align: center; //don't user align=center on the tag, it's deprecated
}
body { //or some other element
  padding-bottom: 20px;
}

用这段代码粘贴页脚？

1 个答案: