AngularJS + Phonegap 应用程序：视图填充 100% 高度答案

【问题标题】：AngularJS + Phonegap app: Views fill 100% heightAngularJS + Phonegap 应用程序：视图填充 100% 高度
【发布时间】：2013-12-04 19:02:46
【问题描述】：

我正在使用 angularJS + topcoat 构建一个带有 phonegap 的 android 应用程序。我设法创建了索引页面、视图和所有基本结构。我的问题是，有些页面（部分）没有要显示的数据。在这种情况下，视图不会填满页面的高度。这造成了一个问题，因为我有一个使用 angular-snap 隐藏的抽屉菜单。因为页面没有填满所有可用的高度，所以应该隐藏的菜单是可见的。有谁知道如何处理这种情况？我附上一张图片来举例说明！ app-example 谢谢！

【问题讨论】：

标签： css angularjs cordova topcoat

【解决方案1】：

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

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

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

.page {
  min-height :100%;
}

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

【讨论】：

感谢您的帮助。我已经试过了，但没有用。我也尝试在 body 和 html 上设置 min-height:100%，也没有用。
尼古拉斯我解决了这个问题。我在部分 div 上设置类，而不是使用 ng-view 指令在“主”div 上设置。现在它起作用了。感谢您的帮助！

【解决方案2】：

在 Nicolas 的帮助下，我设法解决了这个问题。它一开始没有用，因为我在部分 div 上设置了新样式。在尝试了一段时间后，我将类设置在包含 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;
}

注意：我必须为页面类设置背景，否则它将不起作用。

【讨论】：