Question

我一直试图找出最长的时间，而为什么我无法获得100％高度的桌子，尽管它的所有父母都是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都不会覆盖height属性。
还要检查一下检查元素，看看你的css是否被应用，或者~~被删除~~。

<强>更新
要使height属性正确工作（如果以百分比给出），则必须确保其父级已被赋予高度。 Jquery mobile在你的html上添加了自己的div包装器，它的高度不是100％。请参阅here了解解决方案。

使用jQuery Mobile时无法达到高度：100％

1 个答案: