Question

我的网站页脚在Chrome和safari的iphone 5上观看时都是纯色。在Android平板电脑上查看它看起来很好，以及桌面和笔记本电脑上的Chrome开发人员在各种响应设置下。

页脚位置：固定，高度：200px，而前面的div是底部边距：200px。除非页脚被隐藏，否则滚动效果很好。

我已经搜遍过，但似乎没有任何相关内容。我已经搞砸了z-index，边距，填充，背景剪辑和溢出。不确定我的尝试是否因执行不当或误用css而失败。

site link。当我在iPhone上查看时，实例边距仅出现在此示例中。

HTML：

<body>
<div id="page">
<section></section>
<header></header>
<div class="site-content"></div>
<footer></footer>
</div>
</body>

CSS：

body {
  position: relative;
  background-color: rgba(0,0,0,.5);
  clear: both;
}

#page {
  display: block;
  clear: both;
}

*, ::after, ::before {
  box-sizing: inherit;
}

.site-content {
  display: block;
  background-color: rgba(255, 0, 0, .6);
  margin-bottom: 200px;
  border-bottom: 1px solid shade(white, 70%);
  min-height: 50vh;
}

footer {
  position: fixed;
  width: 100%;
  height: 200px;
  padding-top: 1px;
      background: url(https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/textures/grey.png),center no-repeat rgba(0,0,0,.7) scroll;
  bottom: 0;
  -webkit-transform: translate3d(0,0,-3px);
  transform: translate3d(0,0,-3px);
  z-index: -3;
}

页脚由填充的边距覆盖，但仅限于iphone

0 个答案: