当使用“html 查看器”在我的 galaxy tab 2 上显示此 HTML 代码的结果时，在纵向模式下，标题和内容 div 之间有一个小的空白空间。
(在这个 fiddle 上不会出现空格；)
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 有时不太擅长计算百分比。它似乎会因四舍五入的数字而感到困惑。
你可以解释我稍微偏移位置所以它出现在 #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 */
}
关于android - 绝对 css 定位在 android html 上显示空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28638798/