Question

我正在使用angularJS + topcoat构建一个带有phonegap的Android应用程序。我管理创建索引页面，视图和所有基本结构。我的问题是，有一些页面（部分）没有数据显示。在这种情况下，视图不会填充页面的高度。这就产生了一个问题，因为我有一个抽屉菜单隐藏在角度快照中。由于页面未填充所有可用高度，因此可以隐藏应该隐藏的菜单。有人知道如何处理这种情况吗？我附上一张图片来说明！ app-example 谢谢！

Answer 1

为什么不使用css min-height属性。假设您的应用的每个页面都包含在div中，如下所示：

<div classs="page">
  //your page content
  ...
</div>

然后，您可以创建以下CSS规则

.page {
  min-height :100%;
}

这将确保即使您的内容的高度小于屏幕的总高度，它也将占据页面高度的100％。

Answer 2

我通过Nicolas的帮助解决了这个问题。它起初并没有起作用，因为我在部分div上设置了新的风格。尝试了一段时间后，我将课程设置在＆＃34; main＆＃34;保存ng-view指令的div，它工作正常。只是一个例子，以防其他人有同样的问题：

<body ng-controller="MainCtrl"> 
    <div snap-content snap-options="snapOpts" class="page">
        <div ng-view ng-class="slide"></div>
    </div>
</body>

.page {
   min-height :100%;
   background:inherit;
}

注意：我必须为页面类设置背景，否则它将无法工作。

AngularJS + Phonegap应用程序：视图填充100％高度

2 个答案: