Css 如何创建一个带有一列和两个框的简单响应网格？

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

第一列/左列中的框应具有两个框的高度（相应地，相对于底部的余量）。请看下图-红色框表示不想要的行为，绿色框表示想要的行为

首先：在不使用任何JavaScript的情况下（比如计算两个右框的总和和动态设置左框的高度），这是可能的吗

如果是的话，我如何使用CSS最有效地实现这一点？我如何才能保证这也适用于平板电脑和智能手机等移动设备？我想避免使用桌子

在尝试实现这一点时，我总是会混淆

位置

、

显示

和

浮动

。但这是我迄今为止尝试过的，但问题是我静态地设置了左框的高度

显示：内联块；宽度：40%；最小宽度：420px

是我努力保持其响应性的一种方式

CSS HTML

左大盒子
右首框
右第二框

---

.

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

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

这是一个

此时，您需要确定这些框的高度。如果你想要高度动态，据我所知，你应该使用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');
});

这是我的第二个

---

希望这有帮助。

这并不完美。。但是对于纯CSS来说，这是一个很好的起点（也是响应性的！）：是的，这很有帮助，谢谢。遗憾的是，CSS本身并不支持这一点。是的，不幸的是，据我所知，它不支持这一点。我猜原因是：必须有某种方法来包含不确定数量的数据，比如一个长段落或一长串项目。它必须自动向一个方向继续。从上到下滚动更方便，就像报纸一样。否则，小屏幕用户将在div中滚动。因此，我相信，由于这种性质，从css中设置响应高度是比较困难的。最后，我认为您可能会在本文档中找到一些关于设备高度的媒体查询的有用信息：

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

$(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');
});