Question

我在创建的视差页脚中遇到了这个奇怪的问题。看一下这个jsfiddle。我在设计中为客户使用了视差页脚。 jsfiddle是我在项目中使用的代码的简单版本。

页脚在所有浏览器中工作正常，甚至IE，但由于某种原因它拒绝在Safari中工作。所以我发现了问题：

body,html {
    margin:0;
    width: 100%;
    height: 100%;
}

将html的高度设置为100％会导致Safari在最后一节之后不再滚动，因此不会显示页脚。它看起来像我在页脚之前设置的边距被完全忽略。

有谁知道如何解决这个问题？

更新：编辑过的jsfiddle

Answer 1

您无需将footer设置为position: fixed，而是将图片上的背景附件设置为固定。它产生了同样的效果：

footer {
   padding-top: 50px;
   background: url(..imagepath..) fixed; //can change to just 'background' and add `fixed`
   color: white;
   width: 100%;
   height: 200px;
   bottom: 0;
   text-align: center;
   overflow: hidden;
   /*position: fixed;*/ //remove
   /*bottom: 0;*/ //remove
   /*z-index: -1;*/ //remove
}

FIDDLE

<强>更新

我认为最好的解决方案是添加一个没有背景颜色的空div作为间隔符。由于底部边距有固定金额，因此您可以将其用作高度：

<强> HTML

<section>
   <h1>Scroll down</h1>
</section>
<div class="spacer"></div> <!--add-->
<footer>
   ....

<强> CSS

footer {
   padding-top: 50px;
   background-color: #181818;
   color: white;
   width: 100%;
   height: 200px;
   position: fixed;
   bottom: 0;
   z-index: -1;
   text-align: center;
   overflow: hidden;
   /*margin-bottom: 250px;*/ //remove
}

.spacer{
   height: 250px;
}

NEW FIDDLE

视差页脚未在Safari中显示

1 个答案: