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