I'm building an android app with phonegap using angularJS + topcoat. I managed creating the index page, views and all the basic structure. My question is, there is some pages(partials) that doesn't have data to show. In that case, the view does not fill the height of the page. That makes a problem because I have a drawer menu hidden usin angular-snap. Because the page doesn't fill all the available height, the menu that is supposed to be hidden is visible. Does anybody know how to handle this situation? I'm attaching a image to examplify! app-example Thank you!
AngularJS + Phonegap app: Views fill 100% height
3.5k Views Asked by jpgrassi At
2
There are 2 best solutions below
0
On
I managed solving the problem with Nicolas help. It didn't worked in the beginning because I was setting the new style on the partial's div. After trying for a while I set the class on the "main" div which holds the ng-view directive and it worked. Just an example in case others have the same issue:
<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;
}
Note: I had to set a background for the page class otherwise it won't work.
Why don't use the css min-height property. Assume every page of your app is wrapped inside a div as follow :
You can then create the following CSS rule
that will ensure that even if the height of your content is less than the total height of your screen it will occupy 100% of the page's height.