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

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%;
}

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