Question

I have two div-elements, the top one has the height of 40% and the other one 60%.
In my example I have positioned the first one to top: 0; and the second one to bottom: 0;. My issue is that I get a 1px distance between them in Webkit, sometimes!

I have created a jsFiddle that recreates the issue in Webkit (Safari and Chrome, but works fine in Firefox.)

http://jsfiddle.net/bVxDA/ (Resize the window to see the bug in action)

This is the code I’m using.

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

​
I would be fine with a solution that uses JavaScript or jQuery.

Answer 1

If the height of html, body height is an odd number there is a 1px line “remainder”.

Webkit can’t divide 1px and doesn’t try.

See: http://jsfiddle.net/iambriansreed/gPu3Y/

You could make the 1px line disappear if you set the following:

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