css - 粘性页脚几乎可以工作

Question

我使用这篇博文(查看评论 - 我不能发布超过两个链接，因为我是 SO 的新手)在我的网站上放置一个粘性(但不是固定的)页脚。

它一直在网站上无处不在，直到我使用这篇博文(见评论)在悬停时显示我的图像。现在页脚漂浮在页面底部上方很远的地方，但仅在具有图像悬停样式的页面上。 Here是一个破页，here是它工作的地方。

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

有没有办法既让我的页脚停留在页面底部(即使内容没有一直到达底部)又在我悬停时仍然放大我的图像？？？？是什么导致页面底部出现巨大空白？

Answer 1

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

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

到

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

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

您还可以通过将 left 值更改为 0 来检查它是如何以及为什么被破坏的，这样您就会知道后台发生了什么

编辑:如评论中所建议，您还可以通过修复图库样式来修复页面像那样

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

这样以后就不会破坏你的页脚了