Question

我正在尝试使用worklight 5.0创建一个简单的应用程序这是我的设备上的应用程序的屏幕截图：

enter image description here

问题几乎可以忽略不计，但我想解决这个问题。

在屏幕截图中不容易看到，因此您需要按住＆amp;拖着它。您会注意到标签栏下方的白色间距。

在我的CSS中，我已经将高度定义为100％，但这个10-20px的边距仍然在底部。

以下是我的，

CSS：

#content{
height:100%;
width:100%;
margin:0;
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 49%, #2989d8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799),
color-stop(49%,#7db9e8), color-stop(100%,#2989d8));
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 49%,#2989d8 100%);
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 49%,#2989d8 100%);
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 49%,#2989d8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 49%,#2989d8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#2989d8',GradientType=0 ); 
}

HTML：

<body id="content">
<div data-dojo-type="dojox.mobile.View" id="oneTwoTest"
    data-dojo-props="selected:true" >
    <div data-dojo-type="dojox.mobile.Heading"
        data-dojo-props="label:'HTML'"></div>
    <div data-dojo-type="dojox.mobile.ScrollableView" id="aboutView"
        data-dojo-props="scrollDir:'v'">
        <div data-dojo-type="dojox.mobile.ContentPane" id="aboutViewContentPane" href="pages/about.html" ></div>
    </div>
</div>

Answer 1

使用Worklight 6.1，我创建了一个带有固定标题和导航栏的简单Dojo应用程序预览时：

在Eclipse中，我可以看到导航栏下方的这个白色间距（请参阅我对您的应用版本中可能出现这种情况的问题的评论）
在Worklight Console的MBS或Android模拟器/设备（运行Android 4.4.2）中，白色间距不可见。

我不相信这里有错误。

index.html中body标记的与Dojo相关的内容：
Download sample project

<div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
    <div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'Heading'" fixed="top">
    </div>

    <div data-dojo-type="dojox.mobile.View" id="view1" data-dojo-props="selected:false">
        test
    </div>

    <ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom" data-dojo-props="barType:'tabBar'">
        <li data-dojo-type="dojox.mobile.TabBarButton">Label</li>
        <li data-dojo-type="dojox.mobile.TabBarButton">Label</li>
        <li data-dojo-type="dojox.mobile.TabBarButton">Label</li>
        <li data-dojo-type="dojox.mobile.TabBarButton">Label</li>
    </ul>
</div>

在Worklight Studio中的RPE内部：
enter image description here

在Worklight Console的MBS中：
enter image description here

在Nexus 5（Android 4.4.x）设备中：
enter image description here

IBM Worklight 5.0 - 应用程序底部的白色间距

1 个答案: