通过百分比（％）在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的

回答

相关问题