用 div 填充 window。 Div 像素高度在 google chrome 中显示不正确。幅宽作品

Question

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

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

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

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

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

  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  var size = 100;
  // Calculate the number of cells we can fit in the width 
  //and height (there will be extra space)
  w = Math.floor(windowWidth / size);
  h = Math.floor(windowHeight / size);
  // Calculate the extra space
  var widthDiff = windowWidth % size;
  var heightDiff = windowHeight % size;
  // Add the needed amount of height and width to each cell to fill the window
  var widthSize = size + widthDiff / w;
  var heightSize = size + heightDiff / h;
  // Begin to alter the DOM
  var parentDiv = document.createElement('div');
  parentDiv.className = 'grid';  
  for(var y = 0; y < h; y++) {
    for(var x = 0; x < w; x++) {
      var cellDiv = document.createElement('div')
      cellDiv.className = 'cellDiv'
      cellDiv.style.height = heightSize + 'px'; 
      cellDiv.style.width = widthSize + 'px'; 
      parentDiv.appendChild(cellDiv)
    }
  }
  document.body.appendChild(parentDiv)

Answer 1

在 Chrome（可能还有其他浏览器）中，高度和宽度像素值被截断了！参见 this Whosebug answer with the related jsFiddle

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

我主要添加的是：

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

因为我们现在使用的是百分比，所以父容器必须有 width/height:

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

基本上，我们只是降低值，然后将网格居中，这样我们就可以让它看起来更漂亮。

编辑：对这个答案不是很满意，所以又搞砸了。添加了一个函数，该函数找到最接近 window 大小的倍数并使其更喜欢该数字。使其适用于大多数屏幕尺寸，如果它不能完美工作，则可以回退到百分比方法。参见 here。但是，因为它依赖于递归（朴素）算法来找到最接近的倍数，所以很容易破坏浏览器的性能。将搜索范围限制在 5-10 个像素 space 会有所帮助。要点：

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

它非常幼稚，忽略了诸如 "an odd width will never be divisible by an even number"...之类的东西，因此还有很大的改进空间。查看 this discussion and this discussion 了解更多信息。

用 div 填充 window。 Div 像素高度在 google chrome 中显示不正确。幅宽作品

Fill window with divs. Div pixel height displayed incorrectly in google chrome. Width works

javascript

firefox

dom

google-chrome

pixel