CODEWITHSUNDEEP
cssmobile
Soatl
Soatl

Reputation: 10592

Adjust Webpage height to height of mobile screen

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)

enter image description here

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)

Upvotes: 5

Views: 35623

Answers (4)

tsveti_iko
tsveti_iko

Reputation: 8042

Use the viewport height unit in the css like this:

.element { max-height: 100vh; }

or 

.element { min-height: 100vh; }

or even

.element { min-height: calc(100vh - 60px); }

if you need to adjust the height of a element, which is not full height.

Upvotes: 0

skyjacks
skyjacks

Reputation: 1154

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.

Upvotes: 5

Beth Budwig
Beth Budwig

Reputation: 114

Do you mean that you want the content to space out to fill the height? Not sure if that can be done, but one design solution to all the whitespace might be to have a vertical gradient background that's darker on the bottom, to make the content look a little less lonely.

Upvotes: 0

Walter Cameron
Walter Cameron

Reputation: 2383

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.

Upvotes: 6

Related Questions