表格高度百分比不起作用答案

【问题标题】：Table height in percentage not working表格高度百分比不起作用
【发布时间】：2017-01-17 06:29:10
【问题描述】：

我正在开发一个移动网站并尝试使用非常简单的标记。

下面是给我带来问题的代码：

<div class="abc">
  <div>&nbsp;</div>
  <table>

  </table>
</div>

CSS

.abc {height:some-dynamic-value-in-px}

.abc div {height:5%;}
.abc table {height:95%;}

问题是这段代码适用于所有最新的手机。但是当我检查索尼爱立信（500i）时表格高度来自父 div abc 并且 UI 被扭曲。我检查了这个网站http://www.apptools.com/examples/tableheight.php 并给身体高度 {100%} 但仍然没有成功。请让我知道我哪里出错了。

另外，当我给出以 px 为单位的高度时，它适用于所有手机。但我想知道百分比不起作用的原因。

【问题讨论】：

您可能会花费大量时间在看似无穷无尽的移动平台阵列上处理细微的细节。我建议使用类似JQuery Mobile 的设计器来为您生成移动友好的 HTML 布局。他们经历了使布局在所有流行的移动平台上看起来都正确的痛苦。
是的，我知道 Jquery Mobile，但由于某些原因，我们不允许使用 JS，所以我需要完全依赖 HTML 和 CSS。

标签： html css mobile tablelayout

【解决方案1】：

如果您已经知道 div 的高度，那么最好在px 中使用固定尺寸。

尽量避免复杂性，如果没有必要的话。

对于某些浏览器，提供body { height: 100%; } 可能还不够。

html, body { height: 100%; }

.abc { height:100%; }
.abc div { height:5%; }
.abc table { height:95%; }

另外，不要忘记在您的网页上添加 DOCTYPE。

【讨论】：

我使用百分比，以便布局在所有浏览器/hansets 上呈现几乎相同。而且我也包含了 DOCTYPE。我想使用 px 是最佳解决方案。
@user1483487，如果真的那么重要，请使用脚本来控制尺寸。