2012-07-12 59 views
1

我开发一个移动网站,并试图用非常简单的标记。台面高度不工作

下面是我的代码,这是给我的问题:

<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%;} 

问题是这样的代码,所有的最新phones.But工作时,我对索尼埃里克松选中(500I) 表格高度是从父div abc出来的,UI被扭曲了。 我检查这个网站http://www.apptools.com/examples/tableheight.php 并给予了高度{100%}到身体,但仍然没有成功。 请让我知道我要去哪里错了。

此外,当我在PX给这个高度对全体handsets.But我想知道为什么比例不工作的原因。

+0

你可能在微妙的细节燃烧大量时间拨号上的移动平台看似无尽的阵列。我建议使用[JQuery Mobile](http://jquerymobile.com/)设计器之类的东西为您生成适合移动设备的HTML布局。他们已经经历了让布局在所有流行的移动平台上看起来正确的痛苦。 – Asaph 2012-07-12 05:22:30

+0

是的我知道Jquery Mobile,但由于某些原因,我们不允许使用JS,所以我需要完全依赖HTML和CSS。 – user1483487 2012-07-12 05:24:15

回答

0

如果你已经知道div的高度,那么它最好使用固定尺寸px

尽量避免复杂,如果没有必要的。

而对于某些浏览器,让body { height: 100%; }可能还不够。

html, body { height: 100%; } 

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

另外,不要忘记加入您的网页的DOCTYPE

+0

我正在使用百分比,以便布局在所有浏览器/浏览器上都呈现几乎相同的效果。我也包括DOCTYPE。我想用px工作是最佳解决方案。 – user1483487 2012-07-12 05:49:42

+0

@ user1483487,如果真的那么重要,使用脚本来控制尺寸。 – Starx 2012-07-12 05:59:03