javascript - 无法达到高度 :100% when using jQuery Mobile

Question

我一直在努力弄清楚为什么我不能得到一张 100% 高度的 table ，尽管它的所有 parent 都是 100%。我四处游玩后发现，一旦我从网站上删除了 jQuery Mobile，它就可以正常工作了。之后，我创建了它的基本版本，实际上得到了相同的结果。我不知道为什么会这样。这是我的代码:

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>

我使用的是自定义 jQuery Mobile 版本，但即使使用 Google 的 CND，我也得到了相同的结果。

知道为什么会发生这种情况以及如何解决它吗？

编辑:

http://ramiroproductions.businesscatalyst.com/test.html -准系统版本 http://ramiroproductions.businesscatalyst.com/aboutus.html - 实际站点

Answer 1

尝试使用 !important 来确保任何其他 css 没有覆盖高度属性。
还可以通过检查元素来检查您的 css 是否已应用或是否被删除。

更新:
如果以百分比给定，要使 height 属性正常工作，您必须确保其父级已被赋予高度。 Jquery Mobile 在您的 html 上添加了自己的 div 包装器，它的高度不是 100%。见here解决方案。