粘性页脚几乎可以工作

Question

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

它一直在网站上无处不在，直到我使用这个博客 post（查看评论）在悬停时显示我的图像。现在页脚漂浮在页面底部上方很远的地方，但仅在具有图像悬停样式的页面上。 Here is a broken page, and here 是它工作的地方。

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

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

Answer 1

这是因为损坏页面上的全尺寸图库图像（隐藏在视图的最左侧 window）占用了一些 space，您可以通过更改 position 来修复页脚包含来自

的那些图像的元素的

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

到

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

因此这些图像不会干扰页面的其余部分，而 'hidden' 因为 position: fixed; 是相对于浏览器的定位元素 window

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

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

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

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

Sticky footer almost works