html - 创建 2x2 流体布局并填满整个屏幕

Question

我很难弄清楚如何解决一个看似简单的问题。我有一个请求，要制作一个 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 例如:https://jsfiddle.net/q2j940r1/1/

Answer 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>