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!
Why don't use the css min-height property. Assume every page of your app is wrapped inside a div as follow :
<div classs="page">
//your page content
...
</div>
You can then create the following CSS rule
.page {
min-height :100%;
}
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.