页脚重叠答案

【问题标题】：Footer overlaps页脚重叠
【发布时间】：2012-03-19 19:21:20
【问题描述】：

我正在使用 jQuery 菜单幻灯片，但我的页脚有一些问题。

当我放大时，我的页脚与我的所有其他内容重叠。因此，如果您以较小的分辨率看到该网站，您将无法获得所有内容。

我已尝试删除绝对位置，但页脚会转到屏幕顶部。

无论内容的高度如何，我都需要我的页脚始终位于内容下方。

这个脚本可以做到吗？

网址：http://kennethkjaer.gofreeserve.com/

#footer { 
  /* Footer container (whole browser width) */
  background-image:url(../images/footer_bg.jpg);
  bottom: 0;
  position:absolute;
  width: 100%;
  height:85px;
  padding-top:10px;
  padding-bottom: 5px;
}
#footer_box { 
  /* Centered footer container with som padding to align properly the content */
  width: 820px;
  height:30px;
  margin:0px auto;
  position: relative;
  padding:0px 10px 0px 10px;
}
#footercontent {
  width: 360px;
  height: 30px;
  float: left;
  padding: 0px;
}
#footerimg {
  width: 100px;
  height: 30px;
  margin: 0px;
  float: left;
}
#footerimg p {
  float: right;
  margin: 38px 0px 0px 0px; !important;
}

【问题讨论】：

标签： jquery css footer

【解决方案1】：

根据您的问题，我假设您不想要粘页脚。

在这种情况下，是position:absolute 和bottom:0 导致了问题。您告诉页脚始终贴在底部（浏览器窗口的底部，而不是文档的底部），即使有其他内容。因此，当您网页上的其他内容到达浏览器窗口的底部时，它就会被页脚覆盖。如果您删除此 CSS，这将得到解决。如果 HTML 的页脚部分位于页面 HTML 的末尾，它自然会位于（document 的底部），但您可能需要向下滚动才能看到它，因为它赢得了不再停留在浏览器窗口的底部。看看this website 以供参考。我假设这是你想要的那种页脚。

【讨论】：

【解决方案2】：

首先我想说你的标记不好。根据您的要求，您可以为此使用粘性页脚方法

查看链接http://ryanfait.com/sticky-footer/

【讨论】：