Adjust Webpage height to height of mobile screen

Question

I have a mobile app. I want to make my css work with all mobile phones. To do this I just use percentages for all my css calls:

.Wrapper
{
    margin: auto;
    text-align: center;
    width: 60%;
}

The problem is that I cannot get the web page height to match for all pages. By this I mean that Android screens for example are huge (with a lot of white space on the bottom) but other phones are not.(Imagine that the image below is a android. That is how my app will look on it)

I have tried this to get the heights to all be the same:

body
{
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    color: Black;
    background: #39bcd4 none;
    height: 100%;
    width: 100%;
}

The width works but the height does not. How can I get the height to work the same way? If the height is off, then all my percentages are going to be off too (attempting to adjust for each mobile browser)

Answer 1

From Sitepoint's CSS Reference:

Percentage values refer to the height of the element’s containing block. If the height of the containing block isn’t specified explicitly (that is, it depends on content height), and this element isn’t absolutely positioned, the percentage value is treated as auto. A percentage value is also treated as auto for table cells, table rows, and row groups.

Setting your body to position:absolute; should work, if it doesn't try adding top:0; and bottom:0; along with your absolute positioning.

Answer 2

If you want the width and height of your site to be 100% of your WebView’s width and height then you need to set the viewport meta tag:

<meta name="viewport" content="width=device-width,height=device-height initial-scale=1">

A great description of this, along with a number of other tips for hybrid apps, can be found on the Chrome developer site.