如何使用一列和两个框创建一个简单的响应式网格？

Question

我想创建一个CSS网格（不使用任何外部库），我有两列。第一列包含一个框。第二列包含两个框。

第一列/左列中的框应具有两个框的高度（相应地考虑边距底部）。看看下面的图形 - 红色框表示不需要的行为，绿色表示想要的行为。

首先：这可以不使用任何JavaScript（比如计算两个右边框的总和并动态设置左框的高度）？

如果是，我怎样才能最有效地使用CSS实现这一点？我怎样才能确保这也适用于平板电脑和智能手机等移动设备？我想避免使用表格。

在尝试实现此目标时，我总是对position，display和float感到困惑。但这是我到目前为止所尝试的，但问题是我静态设置了左框的高度。

display: inline-block; width: 40%; min-width: 420px是我努力让它保持响应。

CSS

.box-layout {
  display: inline-block;
  width: 40%;
  float: left;
  outline: 1px solid #C3C3C3;
  padding: 10px 20px;
  margin: 0 10px;
  background-color: #FAFAFA;
  min-width: 420px;
}

.left-box {
  min-height: 440px;
}

HTML

<div class="box-layout left-box">
    <h1>Left large box</h1>
</div>

<div class="box-layout right-box right-box-first">
    <h1>Right first box</h1>
</div>

<div class="box-layout right-box right-box-second">
    <h1>Right second box</h1>
</div>

Here is a jsFiddle

Answer 1

如果您只想使用CSS来实现这一点，我建议使用父容器

.container{
    width:1024px;
    margin:0 auto;
    height:440px;
}

这是sample JSFiddle

此时，您需要确定这些方框的高度。如果你想要高度动态，据我所知你应该使用JS，就像这样;

$(document).ready(function(){
    var height = $(window).height();
    var leftBoxHeight = height;
    var rightBoxHeight = height / 2 - 20;
    $('.left-box').css('height', leftBoxHeight + 'px');
    $('.right-box').css('height', rightBoxHeight + 'px');
});

这是我的第二个JSFiddle

希望这有帮助。