I'm not sure if this is the cause but I noticed that your sample HTML page is missing a view port meta tag, which is commonly used in mobile web pages. The rendering logic is a bit different in mobile browsers due to the smaller screen size of mobile devices. Here is an explanation of mobile web browser view ports: http://www.quirksmode.org/mobile/viewports2.html
You have to add a meta tag to your HTML page header that tells the mobile browser something along the lines that the view port has to match the actual device screen width. Here is a Mozilla documentation page that explains it very well: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag On Saturday, January 25, 2014 8:33:03 AM UTC-6, Cayce wrote: > > I have an app that delivers screen content in an html format, pulled from > a database. I need to work in percentages for width & height of elements > that make up the display, to accommodate various devices. I can't get the > height % to work in any components, no matter what I try. I've reduced the > layout to the simplest format for troubleshooting and am including it here. > I've assigned background colors to elements so as to see the effects of > code modifications. > In the screenshot I've attached, the yellow background is part of the > background art. The yellow HTML color attribute is hidden behind the red > Body color, but should be showing at 100% height if working properly. This > is my display code, simplified: > > <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> > <html lang="en"> > <head> > <title></title> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <style> > *{ margin:0; padding:0;} > html { width:100%; min-height:100%; background:yellow;} > body { width:100%; min-height:100%; background:red;} > </style> > </head> > <body> > > <table style="height: 100%; background:white;"> > <tr > > <td width="275" height="200" bgcolor="blue"></td> > <td width="275" height="200" bgcolor="brown"></td> > </tr> > > <tr> > <td colspan="2" width="450" height="300" bgcolor="green"></td> > </tr> > > <tr> > <td colspan="2" width="450" height="300" bgcolor="black"></td> > </tr> > </table> > > </body> > </html> > > Screenshot: > > > <https://lh5.googleusercontent.com/-qeBx8WK7OkU/UuPKxkfvUjI/AAAAAAAAACE/RiuN2_1x2Dc/s1600/CSS_Height_Example.jpg> > > Thanks for any help getting through this. > > Cayce > > > -- You received this message because you are subscribed to the Google Groups "Android Developers" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/android-developers?hl=en --- You received this message because you are subscribed to the Google Groups "Android Developers" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/groups/opt_out.
