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">
<div> </div>
<table>
</table>
</div>
CSS
.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.
Thanks.
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.
