July 12, 2012

table height in percentage not working

Question by user1483487

I am developing a mobile site and trying to use very simple markups.

Below is my code which is giving me problem :

<div class="abc">



.abc {height:some-dynamic-value-in-px}

.abc div {height:5%;}
.abc table {height:95%;}

Problem is this code worked on all the latest phones.But when I checked on sony ericson (500i)
the table height was coming out of the parent div abc and the UI was distorted.
I checked this site http://www.apptools.com/examples/tableheight.php
and gave height {100%} to body but still no success.
Please let me know where I am going wrong.

Also, when I gave the height in px it worked for all handsets.But I want to know the reason why percentage was not working.


Answer by Starx

If you already know the height of the div, then its better to use fixed dimensions in px.

Try to avoid the complexity, if its not necessary.

And for some browsers, giving body { height: 100%; } might not be enough.

html, body { height: 100%; }

.abc { height:100%; }
.abc div { height:5%; }
.abc table { height:95%; }

Also, dont forget to include the DOCTYPE on your webpage.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!