CSS百分比在手机上不正确

Question

我有一个页面，有3个大容器，他们都有一个alpha透明背景 他们在桌面上工作正常，但在平板电脑（iOS和Android）和iPhone的％总和似乎不正确

<div style="position: fixed; top: 0; left: 0; right: 0; height: 10%;"> CONTAINER 1 </div> 
<div style="position: fixed; top: 10%; left: 0; right: 0; bottom: 5%;"> CONTAINER 2 </div> 
<div style="position: fixed; bottom: 0; left: 0; right: 0; height: 5%;"> CONTAINER 3 </div> 

我也尽量在容器1和3，而不是高度分配bootm和高度，但3盒适用于桌面浏览器N个移动了3箱重叠1/2px的罚款或者他们有一点点的1/2像素的空间

所有3个盒子都与alpha相同的PNG，其中重叠的颜色变暗 如果我无法修复％将无法通过fi找到一个解决方案（是可能）仅在移动到alowe重叠，而不和研究背景

Answer 1

确保您设置的meta标签

<meta name="viewport" width="device-width" /> 

这将设定为100％至100％

Answer 2

做你的div也有填充？

默认情况下，CSS的百分比宽度不包括大多数浏览器的填充。例如，如果宽度为25％，填充宽度为5px，则div的实际宽度为25％+ 5px。

的boxsizing：边界框属性将导致大多数浏览器（明显的例外是IE7）治疗的宽度作为填充包容 - 所以用5px的填充25％的宽度的div将是25％

Answer 3

试试这个来代替：

<div style="position: fixed; top: 0; left: 0; right: 0; bottom:90%;"> CONTAINER 1 </div> 
<div style="position: fixed; top: 10%; left: 0; right: 0; bottom: 5%;"> CONTAINER 2 </div> 
<div style="position: fixed; bottom: 0; left: 0; right: 0; top: 95%;"> CONTAINER 3 </div> 

的prolem是％的平均地板到全像素的最接近的数量。你可能曾经有一个像素的间隙，并且一次有1个像素重叠。

然后你可以尝试另一种方式：

<div style="position:fixed;top:0;left:0;right:0;bottom:0;padding:10% 0 5%;box-sizing:border-box;background:yellow"> 
    <div style="position:absolute;top:0;left:0;right:0;height:10%;background:rgba(0,0,0,0.3);">5% top</div> 
<div style="height:100%;background:rgba(0,0,0,0.3);"> middle </div> 
<div style="position:fixed;right:0;left:0;bottom:0;height:5%;background:rgba(0,0,0,0.3);">bottom:5%</div> 
</div> 

ifyou提供codepen或小提琴，那将是更容易为我们所有的

Answer 4

这是真的，它不能在一个工作移动浏览器，但在Android选项卡上正常工作检查

http://devilspc.in/stackoverflow/css-value.html