Question

我的网站存在很大问题（基于Joomla和免费模板）。当我转到此页面时： http://bit.ly/2mv4pC 我应该将 {p.stickynote} 的边距设置为 {margin-bottom：300px; } 以解决我的的问题。

如果您只是尝试使用 {margin-bottom：300px; } ，所以你会看到这个的行为，删除这个边距会使这个div出现在我页面的中心。

我已将 {bottom：0px;} {position：fixed;} 添加到 {div style =“bottom：0px;” id =“footer-cover”} 但背景“底部的黑色横幅”仍然相同。

是否有任何建议将其修复到网站底部？

Answer 1

我认为我不太明白你的问题，但无论如何我都会猜测。我想你希望你的“黑色横幅”位于浏览器查看器的底部而不是页面本身，就像facebook上的聊天栏一样。

所以要做到这一点：

<style>
  #header{}
  #content{margin-bottom:100px} /*to make room for the footer*/
  #footer{height:100px; position:fixed; bottom:0}
</style>

<div id="header" />
<div id="content" />
<div id="footer" />

Answer 2

问题是没有底部的边距，页面高度比窗口边界短，因此页脚div结束并且页面正文渗透。

您想要实现的目标效果是什么？您希望页脚覆盖内容并始终可见吗？或者您是否希望页脚始终位于页面底部？

第一个：

#footer-cover {
  position: fixed;
  background-color: #000;
  bottom: 0px;
}

body {
  background-color: #F5F5F5;
}

第二个：

你想要一个粘性页脚技术，类似于this（感谢更好的链接ZJR），我不记得它的所有细节，但与设置负边距有关。这是一个小小的hackey，但它可以正常工作。

希望这接近你想要达到的目标。

如何在网站底部保留这个div？

2 个答案: