Html 创建2x2流体布局并填充整个屏幕

我很难想出如何解决一个看似简单的问题。我有一个要求，使2x2框布局，将填补整个屏幕，然后分解为一个单一的列在一定的宽度

故障部分并不是真正的问题，我正在努力解决的是2x2网格

我试着用这样的方法来做：

.outer-div{
  display: table;
  width: 100%;
  height: 100%;
}
.inner-div{
  display: table-row;
  width: 100%;
  height: 100%;
}
.inner-block{
  display: table-cell;
  width: 50%;
  height: 100%;
}

这种方法可行，但似乎不太流畅。至少，不是我所期望的。有没有更好的方法来实现这一点？非常感谢您的任何想法

（附图供参考）

编辑

---

好吧，我觉得自己像个白痴。我的解决方案是工作，问题是我有另一个div来显示一些绝对定位的内容和固定高度，我不知道如何解释。请参见Fiddle示例：

这是一个很大程度上取决于您的实现的问题

您需要一个具有多个div的tabellar 2x2解决方案，可以在任何位置和环境下工作。我建议在2x2布局中直接使用表作为容器，包括：

• 绝对位置
• 宽度/高度100%
• 无边距/无边框

---

与浏览器交谈越简单，渲染就越简单，这是我的建议

这是一个很大程度上取决于您的实现的问题

您需要一个具有多个div的tabellar 2x2解决方案，可以在任何位置和环境下工作。我建议在2x2布局中直接使用表作为容器，包括：

• 绝对位置
• 宽度/高度100%
• 无边距/无边框

与浏览器交谈越简单，渲染就越简单，这是我的建议

2x2网格布局： 我在这里创建了一个演示：

您还可以查看下面的代码段：

.col-1{
背景：蓝色；
}
.col-2{
背景：灰色；
}
上校3{
背景：红色；
}
.col-4{
背景：绿色；
}
html、正文、.container{
身高：100%；
}
.集装箱{
位置：相对位置；
身高：100%；
宽度：100%；
}
.货柜组{
身高：50%；
宽度：50%；
浮动：左；
位置：相对位置；
}

2x2网格布局： 我在这里创建了一个演示：

您还可以查看下面的代码段：

.col-1{
背景：蓝色；
}
.col-2{
背景：灰色；
}
上校3{
背景：红色；
}
.col-4{
背景：绿色；
}
html、正文、.container{
身高：100%；
}
.集装箱{
位置：相对位置；
身高：100%；
宽度：100%；
}
.货柜组{
身高：50%；
宽度：50%；
浮动：左；
位置：相对位置；
}

---

关键是将所有容器元素设置为

高度：100%

，包括

html

和

body

标记。并为每个项目设置50%的宽度和高度

html，正文{
身高：100%；
}
身体{
保证金：0；
}
.集装箱{
字体大小：0；/*修复内联空白*/
身高：100%；
}
.项目{
字体大小：16px；/*重置字体大小*/
显示：内联块；
垂直对齐：顶部；
宽度：50%；
身高：50%；
位置：相对位置；
溢出：自动；/*用于滚动条*/
}
.内容{
位置：绝对位置；
左：0；右：0；顶部：0；底部：0；/*拉伸和填充*/
}
.项目：第n个儿童（1）{背景：aqua；}
.项目：第n个孩子（2）{背景：石灰；}
.项目：第n个孩子（3）{背景：金色；}
.项目：第n个孩子（4）{背景：teal；}

A-Lorem ipsum dolor sit amet，是一位杰出的献身者，他是一位临时劳工和职业经理人。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
B
C
D

关键是将所有容器元素设置为

高度：100%

，包括

html

和

body

标记。并为每个项目设置50%的宽度和高度

html，正文{
身高：100%；
}
身体{
保证金：0；
}
.集装箱{
字体大小：0；/*修复内联空白*/
身高：100%；
}
.项目{
字体大小：16px；/*重置字体大小*/
显示：内联块；
垂直对齐：顶部；
宽度：50%；
身高：50%；
位置：相对位置；
溢出：自动；/*用于滚动条*/
}
.内容{
位置：绝对位置；
左：0；右：0；顶部：0；底部：0；/*拉伸和填充*/
}
.项目：第n个儿童（1）{背景：aqua；}
.项目：第n个孩子（2）{背景：石灰；}
.项目：第n个孩子（3）{背景：金色；}
.项目：第n个孩子（4）{背景：teal；}

A-Lorem ipsum dolor sit amet，是一位杰出的献身者，他是一位临时劳工和职业经理人。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
B
C
D

据我所知，最简单的方法是在jQuery中使用一点Javascript来设置div的高度

运行下面的代码段，或查看它是否根据窗口大小动态调整大小

函数setHeight（）{
var windowHeight=$（window.height（）；
$（'.box'）。高度（窗高/2）；
}
设置高度（）；
$（窗口）。调整大小（函数（）{
设置高度（）；
});
*{margin:0px；}
.盒子{
宽度：50%；
高度：100px；
背景颜色：蓝色；
框大小：边框框；
浮动：左；
}