使用 jQuery 移动设备时无法达到 height:100%

Question

我一直在努力弄清楚为什么我无法获得 100% 高度的 table，尽管它的所有父级都为 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 移动版本，但即使使用 Google 的 CND，我也得到了相同的结果。

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

编辑：

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

Answer 1

尝试使用 !important 以确保任何其他 css 不会覆盖高度属性。
还可以通过执行检查元素来检查您的 css 是否已应用或是否被划掉。

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

使用 jQuery 移动设备时无法达到 height:100%

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

html

javascript

css

jquery

jquery-mobile