JQuery Mobile，themeroller，渐变背景不是全屏

Question

我正在尝试使用JQuery mobile创建页面， 我用Themeroller让它看起来像我想要的那样。我使用的背景是渐变，但它不会全屏显示，除非页面上有足够的内容来填充整个屏幕。 见下图：

了解渐变如何不会到达页面底部？这就是我一直坚持的......

我使用Themeroller生成的CSS文件。我尝试编辑它，但它很庞大，我不知道在哪里以及要改变什么。

Answer 1

看起来背景应用于.ui-content元素，该元素不是其容器高度的100％。你可以：

1. 使.ui-content元素100％高度或...
2. 您可以在.ui-page元素而不是.ui-content元素上设置渐变。

我会将渐变设置为.ui-page背景，如下所示：

.ui-mobile .ui-page .ui-content {
    background : none;
}
.ui-mobile .ui-page {
    background : /*gradient here*/;
}

这些规则应该足够具体，以覆盖jQuery Mobile样式表。这是一个演示：http://jsfiddle.net/YeTdT/

如果您在创建跨浏览器css渐变时需要帮助，请参阅ColorZilla：http://www.colorzilla.com/gradient-editor/