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和height而不是高度但是3盒在桌面浏览器上工作正常n移动3盒重叠为1 / 2px或者它们有一点1/2空间

所有3个框都有相同的带有alpha的PNG，重叠的颜色会变暗如果我不能解决％可以找到一个解决方案（是可能的）只在移动设备上重叠而没有和背景

Answer 1

确保设置元标记

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

这将设置100％至100％

Answer 2

你的div还有填充吗？

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

boxsizing：border-box属性会导致大多数浏览器（值得注意的例外是IE7）将宽度视为填充的包含 - 所以25％宽度div与5px填充将是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>

问题是％是平均到最接近的全像素数。您可能只有一个像素的间隙，并且一次像素重叠。

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

<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>

如果你提供了一个编码器或小提琴，那对我们所有人来说都会容易得多

Answer 4

它确实在移动浏览器上不起作用，但在Android选项卡检查

上工作正常

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

移动设备上的CSS百分比不正确

4 个答案: