如何在没有Flexbox支持的情况下分割视口（整个宽度和高度）的x * y网格

I'm trying to have a grid occupying the entire viewport where each cells have the exact same dimensions and are equally using the entire viewport width and height.

我正在尝试占用整个视口的网格,其中每个单元格具有完全相同的尺寸,并且同样使用整个视口宽度和高度。

As I need to display a x * y table/grid where x and y can go up to 20, I would like to avoid using divided percentages (100/2=50%, 100/3=33.33%, 25%, 20%, 16.67%, 14.29%, 12.5%, etc.) width and height.

因为我需要显示ax * y table / grid,其中x和y可以达到20,我想避免使用分割百分比(100/2 = 50%,100/3 = 33.33%,25%,20%,宽度和高度分别为16.67%,14.29%,12.5%等。

(Small) constraint: Using Opera 12.00 which does not support CSS3 Flexbox.

(小)约束:使用不支持CSS3 Flexbox的Opera 12.00。

I don't really need rows/columns concept: it can be multiple <div> floated in line...

我真的不需要行/列的概念:它可以是多个

浮动的...

Here is, in Flexbox, what I am aiming to:

在Flexbox中,我的目标是:

HTML:

<div id="matrix-container">
    <div class="matrix-row">
        <div class="matrix-cell"><div class="matrix-cell-content">1x1</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">1x2</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">1x3</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">1x4</div></div>
    </div>
    <div class="matrix-row">
        <div class="matrix-cell"><div class="matrix-cell-content">2x1</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">2x2</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">2x3</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">2x4</div></div>
    </div>
    <div class="matrix-row">
        <div class="matrix-cell"><div class="matrix-cell-content">3x1</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">3x2</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">3x3</div></div>
        <div class="matrix-cell"><div class="matrix-cell-content">3x4</div></div>
    </div>
</div>

CSS:

body {
    margin: 0;
}
#matrix-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.matrix-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
}

.matrix-cell {
    flex: 1;
    display: flex;
    border: 1px solid grey;
}
.matrix-cell-content {
    flex: 1 1 0;
}

Demo: https://jsfiddle.net/Ly38bsrr/

Can it be done without Flexbox? Or is there a Flexbox-support via JavaScript that I could use?

可以在没有Flexbox的情况下完成吗?或者我可以使用JavaScript支持Flexbox吗?

1 个解决方案

#1

You can use CSS tables:

您可以使用CSS表:

#matrix-container {
  display: table; /* Table layout */
  height: 100%;   /* Fill all the window vertically */
  width: 100%;    /* Fill all the window horizontally */
}
.matrix-row {
  display: table-row; /* Row */    
}
.matrix-cell {
  display: table-cell; /* Cell */
}

Now we will force all columns to have the same width. For that, we will use the fixed algorithm, which is well-defined and usually faster than the auto one. According to that algorithm,

现在我们将强制所有列具有相同的宽度。为此,我们将使用固定算法,该算法定义明确且通常比自动算法快。根据该算法,

A column element with a value other than 'auto' for the 'width' property [...]

'width'属性的值为'auto'的列元素[...]

Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property [...]

否则,第一行中的单元格为'width'属性的值为'auto'以外的值[...]

Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

任何剩余的列均等地划分剩余的水平表空间(减去边框或单元格间距)。

So just don't impose any width to the columns nor the cells, and we are done.

所以不要对列和单元格施加任何宽度,我们就完成了。

Now let's see the heights:

现在让我们看看高度:

In CSS 2.1, the height of a cell box is the minimum height required by the content.

在CSS 2.1中,单元格框的高度是内容所需的最小高度。

Therefore, if the cells have contents with different heights, the rows may have different heights too!

因此,如果单元格具有不同高度的内容,则行也可能具有不同的高度!

But since you have wrappers inside the cells, we can force them to have no height (and let the contents overflow). Thus all cells will have an initial height of 0.

但是由于你在单元格内部有包装器,我们可以强制它们没有高度(并让内容溢出)。因此,所有单元格的初始高度均为0。

.matrix-cell-content {
  height: 0;
}

There is only a problem:

只有一个问题:

CSS 2.1 does not define how extra space is distributed when the 'height' property causes the table to be taller than it otherwise would be.

CSS 2.1没有定义当'height'属性导致表比其他情况更高时分配额外空间的方式。

But most implementations distribute it equally. So no problem.

但大多数实现均等地分配它。所以没问题。

html, body {
  margin: 0;
  height: 100%;
}
#matrix-container {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.matrix-row {
  display: table-row;
}
.matrix-cell {
  display: table-cell;
  border: 1px solid grey;
}
.matrix-cell-content {
  height: 0;
}

<div id="matrix-container">
  <div class="matrix-row">
    <div class="matrix-cell"><div class="matrix-cell-content">1x1</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">1x2</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">1x3</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">1x4</div></div>
  </div>
  <div class="matrix-row">
    <div class="matrix-cell"><div class="matrix-cell-content">2x1</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">2x2</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">2x3</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">2x4</div></div>
  </div>
  <div class="matrix-row">
    <div class="matrix-cell"><div class="matrix-cell-content">3x1</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">3x2</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">3x3</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">3x4</div></div>
  </div>
  <div class="matrix-row">
    <div class="matrix-cell"><div class="matrix-cell-content">4x1</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">4x2</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">4x3</div></div>
    <div class="matrix-cell"><div class="matrix-cell-content">4x4</div></div>
  </div>
</div>

#1