通過百分比（％）在Webkit的

一個像素我有兩個div -elements，最上面的一個具有40％高度，而另一個60％。在我的例子中，我將第一個定位到top: 0;，第二個定位到bottom: 0;。我的問題是，我有時在Webkit中獲得它們之間1px的距離，有時候！通過百分比（％）在Webkit的

我創建了一個的jsfiddle，再現WebKit中的問題（Safari和Chrome，但在Firefox正常工作。）

http://jsfiddle.net/bVxDA/（調整窗口的大小在行動中看到的bug）

這是我正在使用的代碼。

HTML

<div id="cover-top"></div> 
<div id="cover-bottom"></div>

CSS

html, body { 
    background: red; 
    height: 100%; 
} 

#cover-top, 
#cover-bottom { 
    background: #000; 
    position: absolute; 
    width: 100%; 
} 

#cover-top { 
    height: 40%; 
    top: 0; 
} 

#cover-bottom { 
    height: 60%; 
    bottom: 0; 
}

我會被罰款與使用JavaScript或jQuery的解決方案。

來源

2012-03-20 Filip

如果html, body高度的高度是奇數，則有1px行「餘數」。

Webkit不能劃分1px而不嘗試。

參見：http://jsfiddle.net/iambriansreed/gPu3Y/

你可以做，如果你設置1px的線消失如下：

#cover-bottom { 
    height: auto; 
    top: 40%; 
    bottom: 0; 
}

來源

2012-03-20 15:58:47 iambriansreed

證明：http://jsfiddle.net/iambriansreed/gPu3Y/ – iambriansreed 2012-03-20 16:08:43

發生這種情況，每次40％不是整數。讓我們假設你的網頁是98px高度，所以我們得到：

40％= 39,2px
60％= 58,8px

，因爲我們不能得出「半壁江山」的像素，第一個div的高度爲39px，第二個的高度爲58px。另外，第二個從上面繪製40px，因爲這兩個div不能「重疊」（記住：第一個是39,2px高度，所以我們不能開始繪製在39px - 將會有0.2px重疊）並且所以我們最終會遇到他們之間非常奇怪的「差距」。

來源

2012-03-20 16:03:00 oezi

只是改變過去的規則

#cover-bottom { 
    top: 40%; 
    bottom: 0; 
}

所以也沒有問題，如果<html>元素的高度是奇數

http://jsfiddle.net/bVxDA/4/（我改變背景顏色只是爲了檢查填充行爲）

來源

2012-03-20 16:03:17 fcalderan

爲什麼downvote？它不解決問題嗎？ – fcalderan 2012-03-20 16:10:54

通過百分比（％）在Webkit的

回答

相關問題