0

我使用此博客文章（请参阅评论 - 我不能发布超过两个链接，因为我是 SO 新手）在我的网站上放置一个粘性（但不固定）页脚。

它在网站上无处不在，直到我使用这篇博文（见评论）在悬停时显示我的图像。现在页脚漂浮在页面底部上方，但仅在具有图像悬停样式的页面上。这是一个损坏的页面，这是它正在工作的页面。

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

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

4

1 回答 1

0

这是因为损坏页面上的全尺寸画廊图像（隐藏在视图窗口的最左侧）占用了一些空间，您可以通过更改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;
}

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

于 2015-01-05T23:01:55.193 回答