在移动网站上背景颜色/背景图像的底部被切除

Question

我已经回答了类似问题的答案，但没有一个答案对这个问题有所帮助。 我的背景图像在视口的底部被切除。 如果我删除背景图像并使用纯色作为背景，则会发生相同的情况。 可以看到移动页面上的文本，背景被截断。

使用Chrome的设备模式复制iPhone 6来查看网站。 在这个问题上的任何帮助将不胜感激！

开发站点

Answer 1

您的content元素设置为height:100% ，使其成为其父代高度的100％。 最终它的高度不足以容纳其中的1000px高的元素。 通常，该元素将扩展为包含其内容，但是您的height属性将覆盖该行为。

content似乎也不需要position:absolute; 无论是。 这没有帮助解决尺寸问题。

我会摆脱：

div.content {
    position: absolute;
    top: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

然后还删除内联样式的height: 1000px元素上的.page 。