无法达到高度:使用jQuery Mobile时达到100%

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

本文关键字：Mobile 100% jQuery 高度 使用      更新时间：2023-09-26

我一直在试图弄清楚为什么我不能得到一张 100% 高度的桌子，尽管它的父母都是 100%。玩了一下，我发现一旦我从网站上删除了jQuery移动版，它就可以工作了。之后，我创建了一个裸露的版本，实际上得到了相同的结果。我不知道为什么会这样。这是我的代码：

.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 - 实际站点

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

更新：
要使 height 属性正常工作（如果以百分比形式给出），您必须确保其父属性已被赋予高度。Jquery mobile正在您的html上添加自己的div包装器，该包装器的高度不是100%。有关解决方案，请参阅此处。

相关文章：