White space below div in Chrome, but not Firefox (HTML5)

Question

I'm working on a small JavaScript library to make dynamic grids on websites. Anyway, things are going pretty well, except sometimes I notice a sizable white space at the bottom of my div in Chrome. This tends to pop up in two situations:

1) When the browser is open to it's full window size.

2) If the grid elements are small.

Here is the page style where it happens most.

Now, this is a problem because the JavaScript code is written specifically to take the window size, and create elements of the correct size to fill the screen. It works perfectly in Firefox.

If you check that out with Chrome with a full window, you'll notice a white space at the bottom. Then, if you resize the window to half-size or so, it disappears. Also relevant, this issue is not happening in Firefox at - no extra white space anywhere.

Here is a JS fiddle that should recreate the problem. Same deal, white space in Chrome (might need to resize the view window) and no white space in Firefox.

Any ideas out there about what might be the issue? I've read a lot of similar posts and poked around with a lot of the standard problems, such as border-box, vertical-align and things like that. I haven't gotten anywhere though.

EDIT: I've also done some debugging in the console. For example, checking the window height versus the height of the div versus the height of all the elements combined leads nowhere.

$(window).height()
=> 656

$('#patchwork').height()
=> 656

Patchwork.dimensions.Y
=> 656

Patchwork.patchSize.Y * Patchwork.patchCount.Y
=> 656

This is basically saying that everything thinks and expects to take up all 656 pixels, but for some reason it is not actually filling the entire space.

And in IE11 it increase the space between. This is for sure a roundup issue, that is different between browsers. As for Firefox, it sizes the lowest row larger instead of the bottom gap that renders on Chrome. So the question is, do you want exact size of each of your squares or should the whole page be filled? — Asons, Feb 26 '14 at 06:32
Ya, that's the conclusion I came to this morning. The solution I ended up using is that is the pixel value if a decimal, either a) find a close integer value for the row count that would result in an integer for the patch size, or b) if that didn't work then just round up. In regards to your question, they are both really important, but filling the whole page or area is the most so. Did you have any ideas in mind? — tydotg, Feb 27 '14 at 02:12

score 1 · Accepted Answer · edited May 23 '17 at 10:31

With a window height of 754 I got 13 patches, each with a height of 56 (outline excluded).

This tells me that you might not calculate the amount of patches per total height, 754 / 50 = 15.08.

If you do that instead and then spread the reminder (4 in this case) equal among the patches (in this case every 7:th patch), you will get both a full page and patches being as close to their set size as possible.

Notes:

Your span tag, <span class="white-space-remover"style="font-size:0px;visibility:hidden">.</span>, need to have a space char after the last qoute sign in the class name and the 's' in style (one never know how that effects the rest)

This link has some good reading about round-ups in css: Are the decimal places in a CSS width respected?

It also looks like the outline acts different in different browsers. Try drop that one and use a border instead, with border-box;

// add this instead of outline
.patch {
    width: 50px;
    border: 1px solid #fff
    box-sizing: border-box;
}
/*
   "border-box" makes the element have a total size of its set width
   which means setting the border size to 1 will not change the
   total width of the element, it will change the "inner width" to 48
*/

// to support IE7 (and lower) use this to get 50px element
.patch {
    width: 48px;
    border: 1px solid #fff
}
/*
   and if you will add padding you need to re-calc the width as
   paddings will affect the total width in the same way border does
*/

More reading about box-sizing: *{ box-sizing: border-box }

Awesome, thanks for the help there. I ended up rounding, but your 'spread the remainer' is a much more elegant and ultimately precise solution. Also, I wasn't aware of the border box sizing, again, thank you. PS. Not sure if you were checking out the fiddle or the live site, but the live site has had the updates I was talking about, like rounding or finding close factors, so it might not be as informative to the original problem as the fiddle. Regardless, I think you solved it. — tydotg, Feb 28 '14 at 08:26
Glad it worked out for you (I checked both, to make sure to understand your question as correct as possible) — Asons, Feb 28 '14 at 08:30

White space below div in Chrome, but not Firefox (HTML5)

1 Answers1