0

我有一个在 css 中的 html 标记上运行的渐变背景。在 body 标签上，我有一个简单的无缝图案，在 x 和 y 轴上重复。

一切似乎都很好，直到我在屏幕高度远高于其宽度的 ipad/iphone（纵向模式）上预览了该网站。

在普通屏幕或手机横向模式下，网站将在我页面的页脚处结束。但是，当屏幕高度较高时，无缝图案将停止重复，在页脚后留下空白渐变。

我尝试将 html 和 body 的高度都设为 100%，但没有任何区别。我也尝试过使用 javascript 来动态更改 body 的高度以匹配 html 的高度，但无济于事。

谁能帮我解决这个问题？提前致谢！

编辑：

jsfiddle.net/ek4jU/2/

在小提琴中，放置在 html 中的背景渐变一直在重复，但正文中的白色背景不是。我明白，如果我要让身体的高度达到 100%，这将是我需要的正确结果。然而，这是为了展示我将在移动设备上看到的内容，即使将 100% 的高度赋予身体。

4

1 回答 1

0

进行下一个更改并查看 jsfiddle 演示：

body { background-color: #FFF; } /*remove this*/

html{
    height: 100%;
}
body {
    height: 100%;
    background: #4c4c4c; /* Old browsers */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#4c4c4c), color-stop(0.54, #595959), to(#131313));
    background: -webkit-linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%);
    background: -moz-linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%);
    background: -o-linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%);
    background: linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%); /* FF3.6+ */ /*         Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c',             endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}

见演示：http: //jsfiddle.net/EaGAV/

于 2013-10-27T03:46:15.240 回答