Question

我想用div填充窗口大小。对于px中指定的div大小，屏幕将尽可能多地填充，在侧面和底部留下剩余边缘量px。然后将该剩余量除以行（或列）中的单元格数，然后将其添加到行（或列）中每个单元格的高度（或宽度）。

对于宽度，这可以完美地工作，但是当相同的逻辑应用于高度时，它会断开。宽度和高度都适用于Firefox。

屏幕截图：http://i.imgur.com/mpDCM0G.png

制作div的JSfiddle：https://jsfiddle.net/xb82c4zt/

直播：http://conwaygameoflife.heroku.com/

bower.json

Answer 1

在Chrome（可能还有其他浏览器）中，高度和宽度像素值会被截断！请参阅this stackoverflow answer以及相关的jsFiddle

百分比值也会被截断，但不会那么严重。因此，要解决此问题，您可以像我in this jsFiddle一样将像素转换为百分比。

我添加的主要内容是：

var widthPercent = widthSize / windowWidth * 100;
var heightPercent = heightSize / windowHeight * 100;

因为我们现在使用百分比，所以父容器必须具有宽度/高度：

parentDiv.style.height = windowHeight + 'px';
parentDiv.style.width = windowWidth + 'px';

并将循环更改为：

for(var x = 0; x < w*h; x++) {
    var cellDiv = document.createElement('div');
    cellDiv.className = 'cellDiv';
    cellDiv.style.height = heightPercent + '%'; 
    cellDiv.style.width = widthPercent + '%'; 
    parentDiv.appendChild(cellDiv)
}

现在，总是在Chrome中完美地工作。但是，它确实在某些情况下使其完美......基本上取决于截断百分比的时间（以及多大程度）。

经过进一步反思后，看起来百分比也会被解析为小数像素值......但在Chrome中仍会被截断。所以，让我们的数学更好，并找出我们可以使用的最大的非小数像素值...它实际上非常简单。 See here

基本上，我们只是对值进行平移，然后将网格居中，以便我们可以使它看起来很漂亮。

编辑：对这个答案不太满意，所以再搞了一些。添加了一个找到最接近窗口大小倍数的函数，并使其更喜欢该数字。使其在大多数屏幕尺寸下工作，并且如果不能完美地工作，则会回退到百分比方法。见here。但是，因为它依赖于递归（幼稚）算法来找到最接近的倍数，所以很容易搞砸你的浏览器性能。限制为仅5-10像素的搜索空间有助于。它的要点：

function closestMultiple(width, size, n, limit) {
    if(n > limit) {
        return {m: width/size, s:size};
    }
    if((width % (size+n)) == 0) {
        return {m: width / (size+n), s: size+n};
    } else if((width % (size-n)) == 0) {
        return {m: width / (size-n), s: size-n};
    }

    return closestMultiple(width, size, n+1, limit);
}

这很幼稚，忽略了“奇数宽度永远不能被偶数整除”之类的东西......所以还有很大的改进空间。有关详情，请查看this discussion和this discussion。

用div填充窗口。在谷歌浏览器中，Div像素高度显示不正确。宽度有效

1 个答案: