jQuery Mobile因为最小高度而打破了造型

Question

我正在为客户建立一个测试移动网站：http://preview.stafforce.co.uk/mobile/

正如您所看到的，在使用正确的视口大小在移动设备或桌面上加载网站时，您将看到一个带有三个选项的红色框。红色框是页面本身被一类飞溅告诉红色。 （我最初把它作为一个单独的DIV，使用固定的位置坐在页面顶部，但这有几个定位问题）。

在桌面上，这可以正常工作，但在移动设备上，例如当工具栏消失时使用Safari的iPhone和/或你滚动/改变方向你得到一个黑色条，这是因为正在显示div不占用屏幕的全部尺寸（jq mobile使用min-height这是完成使用框架来实现这一目标。）

有关如何解决此问题的任何想法？还是有类似的问题？在进行过渡时也注意到它们在某些地方看起来被切断，这可能再次归因于这个最小高度并没有使事情变得正确。

示例：

编辑：我将主体更改为黑色的原因是因为当你进行翻转过渡时，这就是你所看到的背后，黑色是在手机上进行转换时背景的正确颜色iPhone。

Answer 1

你应该使用Jquery mobile enhanced＆＃39; listview＆＃39;并使用data-role =＆＃39; content＆＃39;将您的内容保存在DIV中。 Jquery mobile将使您的内容全屏显示。 您不应手动设置listview或其他任何内容。

以下是演示：http://jsfiddle.net/nachiket/YSp3x/

我没有设置图标和徽标，但你会明白的。 如果可能，请使用Jquery mobile Theme Roller进行基本样式设置，并在其上进行自定义。

修改 您可以在具有data-role =＆＃34; page＆＃34;的div上设置颜色。

像：

.myPage {
    background-color:#ff0000; 
    background-image:none;
}​

以HTML格式

<div data-role="page" class="myPage">

我已经更新了jsfiddle链接。