Question

我正在开发一个小型JavaScript库，以便在网站上制作动态网格。无论如何，事情进展顺利，除非有时我注意到我的div底部有一个相当大的空白区域。这往往会在两种情况下出现：

1）当浏览器打开它的完整窗口大小时。

2）如果网格元素很小。

Here is the page style where it happens most.

现在，这是一个问题，因为JavaScript代码专门用于获取窗口大小，并创建正确大小的元素来填充屏幕。它在Firefox中完美运行。

如果您使用完整的窗口检查Chrome，那么您会发现底部有一个空白区域。然后，如果您将窗口大小调整为一半左右，它就会消失。同样相关的是，这个问题在Firefox中没有发生 - 任何地方都没有额外的空白区域。

这是一个应该重新创建问题的JS fiddle。同样的交易，Chrome中的空白区域（可能需要调整视图窗口的大小）并且Firefox中没有空格。

关于可能出现什么问题的任何想法？我已经阅读了很多类似的帖子，并引发了许多标准问题，例如border-box，vertical-align等等。我没有到达任何地方。

编辑：我也在控制台中做了一些调试。例如，检查窗口高度与div的高度相对于所有元素的高度组合无处可去。

$(window).height()
=> 656

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

Patchwork.dimensions.Y
=> 656

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

这基本上是说所有人都认为并且期望占据所有656像素，但由于某种原因它实际上并没有填满整个空间。

Answer 1

窗口高度为754我得到了13个补丁，每个补丁的高度为56（不包括轮廓）。

这告诉我你可能无法计算每个总高度的补丁数量，754/50 = 15.08。

如果你这样做，然后传播提示（在这种情况下为4）在补丁中相等（在这种情况下每7个补丁），你将得到一个完整页面和补丁尽可能接近他们的设置大小尽可能。

注意：

你的span标记<span class="white-space-remover"style="font-size:0px;visibility:hidden">.</span>需要在类名中的最后一个qoute签名和样式中的's'之后有一个空格字符（一个人永远都不会知道其余的影响）

此链接对css中的汇总有一些很好的解读：Are the decimal places in a CSS width respected?

看起来大纲在不同浏览器中的行为也不同。尝试删除那个并使用边框代替，使用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
*/

更多关于盒子大小的阅读：*{ box-sizing: border-box }

Chrome中div下方的空白区域，但不包含Firefox（HTML5）

1 个答案: