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

【问题标题】：JQuery Mobile, themeroller, gradient background is not full screenJQuery Mobile，themeroller，渐变背景不是全屏
【发布时间】：2012-11-26 22:26:29
【问题描述】：

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

看看渐变怎么没有到页面底部？这就是我一直坚持的...

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

【问题讨论】：

标签： jquery-mobile mobile background gradient themeroller

【解决方案1】：

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

将.ui-content 元素设为100% 高度或...
您可以在.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/

【讨论】：