Can't achieve height:100% when using jQuery Mobile

Question

I've been trying to figure out for the longest while why I couldn't get a table at 100% height although all it's parents were at 100%. Playing around I found it worked once I removed jQuery mobile from the site. After that I created a bare bones version of it and actually got the same results. I have no idea why this happens. Here's my code:

HTML:

<table class="container">
   <tr style="height:15%;"><td>Menu Goes here</td></tr>
   <tr style="height:85%;"><td>Content Goes here</td></tr>
</table>

CSS:

<link rel="stylesheet" type="text/css" href="boilerplate.css">
<link rel="stylesheet" type="text/css" href="jquery.mobile.custom.structure.min.css">
<style type="text/css">
body, html {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.container {
    height:100%;
    width:100%;
    border:solid 2px red;
}
tr {
    border:solid 2px blue;
}
</style>

JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.mobile.custom.min.js"></script>

I'm using a custom jQuery Mobile build but I get the same results even when I use Google's CND.

Any idea why this happens and how to work around it?

EDIT:

http://ramiroproductions.businesscatalyst.com/test.html - barebones version http://ramiroproductions.businesscatalyst.com/aboutus.html - actual site

Answer 1

Try using !important to make sure that any other css is not overriding the height property.
Also check by doing an inspect element to see if your css is applied or it is striked out .

Update:
For the height property to work correctly if given in percentage you have to make sure that its parent has been given a height. Jquery mobile is adding its own div wrapper on your html which is not having height 100%. see here for solution.