粘性页脚几乎可以工作

Question

我使用这篇博文（请参阅评论 - 我不能发布两个以上的链接，因为我是SO的新手）在我的网站上添加一个粘性（但不是固定的）页脚。

它一直在网站上的任何地方工作，直到我使用此博客文章（请参阅注释）在悬停时显示我的图像。现在，页脚浮动在页面底部上方，但仅在具有图像悬停样式的页面上。 Here是一个损坏的页面，here是它正在运行的页面。

我猜它与ul.enlarge span的样式有关，因为当我删除Chrome开发工具中的那些时，页脚会弹回原位，尽管它会使放大的悬停图像全部显示在页面（显然不是我想要的）。

有没有办法让我的页脚留在页面的底部（即使内容没有一直到达底部）并且当我悬停时仍然放大我的图像????是什么导致了页面底部的巨大空白？

Answer 1

这是因为破损页面上的全尺寸图库图像（隐藏在视图窗口的最左侧）占用了一些空间，您可以通过更改包含这些图像的元素的position来修复页脚从

ul.enlarge span {
    left: -9999px;
    position: absolute;
}

到

ul.enlarge span {
    left: -9999px;
    position: fixed;
}

因此，这些图片不会干扰页面的其余部分，而隐藏在＆＃39;因为position: fixed;是相对于浏览器窗口的定位元素

您还可以通过将left值更改为0来查看错误的方式和原因，以便了解后台发生的情况

编辑：根据评论中的建议，您还可以通过修复图库样式来修复页面 像那样

ul.enlarge span {
    display: none;
}
ul.enlarge li:hover span {
    display: block;
    position: absolute;
    left: -20px;
    top: -300px;
}

所以它将来不会打破你的页脚