绝对css定位在android html上显示空白答案

【问题标题】：Absolute css positioning shows white space on android html绝对css定位在android html上显示空白
【发布时间】：2015-10-14 17:47:23
【问题描述】：

当使用“html 查看器”在我的 Galaxy Tab 2 上显示此 HTML 代码的结果时，在纵向模式下，标题和内容 div 之间有一个小的空白区域。

http://jsfiddle.net/jkvuwn2h/

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

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

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

提前致谢！

【问题讨论】：

标签： android html css

【解决方案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 */
}

【讨论】：