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来显示一些绝对位置和固定高度的内容，我不知道如何解释。请参见小提琴，例如：https://jsfiddle.net/q2j940r1/1/

最佳答案

关键是将所有容器元素设置为height:100%，包括html和body标记。并为每个项目设置50%的宽度和高度。
JsFiddle Example

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.container {
    font-size: 0; /*fix inline gaps*/
    height: 100%;
}
.item {
    font-size: 16px; /*reset font size*/
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 50%;
    position: relative;
    overflow: auto; /*for scrollbar*/
}
.content {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0; /*stretch and fill*/
}
.item:nth-child(1) { background: aqua; }
.item:nth-child(2) { background: lime; }
.item:nth-child(3) { background: gold; }
.item:nth-child(4) { background: teal; }

<div class="container">
    <div class="item">
        <div class="content">A - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
</div>