我使用这篇博文(请参阅评论 - 我不能发布两个以上的链接,因为我是SO的新手)在我的网站上添加一个粘性(但不是固定的)页脚。
它一直在网站上的任何地方工作,直到我使用此博客文章(请参阅注释)在悬停时显示我的图像。现在,页脚浮动在页面底部上方,但仅在具有图像悬停样式的页面上。 Here是一个损坏的页面,here是它正在运行的页面。
我猜它与ul.enlarge span
的样式有关,因为当我删除Chrome开发工具中的那些时,页脚会弹回原位,尽管它会使放大的悬停图像全部显示在页面(显然不是我想要的)。
有没有办法让我的页脚留在页面的底部(即使内容没有一直到达底部)并且当我悬停时仍然放大我的图像????是什么导致了页面底部的巨大空白?
答案 0 :(得分: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;
}
所以它将来不会打破你的页脚