CODEWITHSUNDEEP
javascriptcsshtmlgoogle-chrome
tydotg
tydotg

Reputation: 631

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

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.

Upvotes: 1

Views: 1953

Answers (1)

Asons
Asons

Reputation: 87191

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 }

Upvotes: 1

Related Questions