% and vh height not working on android web app

HTML & CSS
1

Hi,

I am developing a web app, and it works great in the browser and when saving it to home screen, on both android and ios. However, when downloading it as an actual app the % height on .container doesn’t work on android. If i make i try making it as a static height in pixels… it does. Anyone know what might be the reason for this? Can it be something with the “shell” (which isnt made by me) that my html/css etc is used within when using it as an app? It’s the first time I make a web app, anyone experienced this before?

it’s pretty standard stuff.

Html:

   <body>
      <div class="container">
         <div class="some-element"></div>
         <div class="some-element"></div>
      </div>
   </body>

CSS:

body, html{ height: 100%; }

.container { height: 100%; }

.some-element { height: 50vh; }

thanks.

EDIT: Also vh (viewport height) css doesn’t work either (using it on some elements in the app).

2

I don’t have any experience with apps but if your code is nested inside another element that has no height set then you will lose the 100% effect because it will collapse to auto. Can you re-code without relying on height?

3

Can we assume that .container is a direct child of <body>? E.g. your HTML is this:

<body>
<div class="container">
  <!--crap-->
</div>
</body>
4

That is true but wouldn’t:

.container { height: 100vh; }

work in that case since it’s not dependent on the height of it’s parents? setting it to a px value works, it’s like the viewport has no height?

EDIT: absolute positioned elements inside .container that have 100% height does work. But if i set .container to absolute and 100% height or top: 0, bottom 0 it stil doesn’t work.

5

Yes, updated the thread to make it more clear.

6

VH is still pretty new. Perhaps it’s just not supported.

7

might be, but .container also doesn’t get 100% height if I set it as absolute positioned, or maybe it is, but it is <body> that isn’t getting height 100%? absolute positioned and 100% height works on children to .container so it should work on that one aswell.

8

First with your html,body{height:100%;} set the body to background:red. See if the entire app is red.

Then go from there. See where exactly it fails.If that above example works, then set .container to background:blue Is the app blue?

1 Like
9

It’s probably not supported in those devices and in early versions of -webkit you still needed 100% height on html,body to make it work.

Maybe you need to re-think how the page is displayed so that it doesn’t rely on height as such.

As Ryan suggested perhaps you need to go back to the beginning and just find out what is happening with some basic cut-down html and then take it from there. Height:100% has always been an issue when referring to the root element. Mobile viewports are not like real viewports which is why fixed positioning took a long long time to work on some devices.

What happens if you set ::

body > * {display:table;height:100%;width:100%}

(Just for testing to see what happens)

10

Can confirm that is <body> who doesn’t get 100% height, any idea how to solve this?

EDIT: Seems like this guy is having/had the same issue, and looks like it is a “shell thing”?

11

Yes it looks like something beyond your control with plain css (but would still be worth experimenting with the things already mentioned).

12

Would it be possible to do that via some sort of other scripting? E.g. Javascript? I’m not sure about any sort of app development, so I’m not sure if something like that exists for apps. Might be possible with that.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.