如何拥有X*Y网格，该网格将视图(整个宽度和高度)分开而无需Flexbox支持

Question

我正在尝试使一个网格占据整个视口，每个电视都具有完全相同的尺寸，并且同样使用整个视口宽度和高度。

因为我需要显示 x * y table/grid，其中 x 和 y 可以上升到20，我想避免使用分隔百分比（100/2 = 50％，100/3 = 33.33％，25％，20％，16.67％，14.29％，12.5％等）宽度和高度。

（小）约束：使用不支持CSS3 Flexbox的Opera 12.00。

我真的不需要行/列概念：它可以是多个<div> floed 在线...

这是在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;
}

演示：https：//jsfiddle.net/ly38bsrr/

可以没有Flexbox完成吗？还是可以使用我可以使用的JavaScript的flexbox-support？

Answer 1

您可以使用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 */
}

现在，我们将强迫所有列具有相同的宽度。为此，我们将使用fixed算法，该算法定义明确，通常比auto算法更快。根据该算法，

1. 具有" width"属性"自动"以外的值的列元素[...]
2. 否则，在第一行中具有" width"属性"自动"以外的值的单元格[...]
3. 任何剩余的列同样划分剩余的水平表空间（减边框或单元间距）。

因此，只是不要向色谱柱或细胞强加任何宽度，我们就完成了。

现在让我们看看高度：

在CSS 2.1中，牢房的高度是 内容。

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

但是，由于您在单元格内有包装器，因此我们可以强迫它们没有高度（并让内容溢出）。因此，所有电池的初始高度为0。

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

只有一个问题：

css 2.1 不定义 "高度"属性使桌子比以其他方式高 会。

，但大多数实现都平等地分配了它。所以没问题。

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>