Question

在我的Galaxy选项卡2上显示此HTML代码的结果时，使用＆＃34; html viewer＆＃34;，在纵向模式下，标题和内容div之间有一个小的空白空格。

（在这个小提琴上，空格不会出现;）

HTML：

<body>
<div id="content">content</div>
<div id="navigation">nav</div>
<div id="header">header</div>
</body>

CSS：

html, body{width:100%;padding:0;background:#fff;margin:0;height:100%;}
#header, #content, #footer, #navigation{margin:0;padding:0;position:relative;display:block;float:left;clear:both;width:100%;}
#header{background:green;display:block;height:33%;padding-bottom:0px;margin-bottom:0px;}
#navigation{background:blue;display:block;height:5%;}
#content{position:absolute;top:38%;background:red;display:block;height:57%;padding-top:0px;margin-top:0px;}    
#footer{background:teal;display:block;height:5%;}

你知道如何解决这个问题吗？

提前致谢！

Answer 1

Android在某些时候添加百分比并不是很好。似乎可以通过舍入数字来混淆。

您可以解释这一点我略微偏移位置，因此它显示在#header下面并且有一个很小的重叠：

#header {
    background:green;
    display:block;
    height:33%;
    padding-bottom:0px;
    margin-bottom:0px;
    z-index: 2; /* make it appear above #content */
}

#content{
    position:absolute;
    top:37%; /* reduced by 1% to allow for rounding issue */
    background:red;
    display:block;
    height: 58%; /* increased by 1% to account for reduced top value */
    padding-top:0px;
    margin-top: 0;
    z-index: 1; /* appear behind #header */
}

绝对的CSS定位显示android html上的空白区域

1 个答案: