Html 我不知道'；我不知道如何创建两列布局

我尝试使用两列布局，但我需要两列都延伸到底部。布局如下所示：

[---标题---]

[第1行][第2行]

[第1行][第2行]

[第1行][第2行]

等等等等。。。（转到页面底部）

我在互联网上到处搜索，但找不到任何适合我的东西

它必须是两列，一列是固定大小的，另一列填充屏幕的其余部分（水平），两列都必须是不同的颜色，并且都必须延伸到底部。如果我把内容放进去，它们就不会溢出

我的代码是：

html，正文{
填充：0；
保证金：0；
身高：100%；
}
.hb{
背景色：#3A3A；
宽度：100%；
}
.hb头{
字体系列：“Roboto Slab”，衬线；
颜色：#fff；
保证金：0；
}
.机器人板{
字体系列：“Roboto Slab”，衬线；
}
.导航按钮{
颜色：#fff；
文字装饰：无；
显示：内联块；
文本对齐：居中；
填充：2px；
浮动：左；
}
.navbutton:链接，.navbutton:已访问{
背景色：#00bc00；
}
.导航按钮：激活{
背景色：#007200；
}
.聊天内容{
位置：相对位置；
宽度：100%；
}
.服务器列表{
背景色：#b2b2b2；
颜色：#fff；
浮动：左；
宽度：300px；
身高：50%；
}
.服务器聊天{
背景色：#999；
颜色：#fff；
溢出：隐藏；
身高：50%；
}

标题
显示文本
显示文本

使用CSS网格，您可以很容易地完成所描述的布局

正文{
显示：网格；
网格模板列：200px 1fr；/*左列固定，右列剩余*/
网格柱间隙：1rem；/*柱之间的小间隙*/
}
标题{
网格列：跨度2；/*标题应为全宽*/
文本对齐：居中；
背景色：#eee；
}
第1节左{
背景色：#ddd；
}

标题
左列
右栏






左列的高度与此相同

您可以轻松地将Flex用于此布局：

*{
框大小：边框框；
}
身体{
保证金：0；
高度：100vh；/*这将使身体进入全高屏幕*/
显示器：flex；
弯曲方向：立柱；
}
标题{
边框：1px实心；
填充：10px；
}
.集装箱{
flex:1；/*这将使内容伸展到底部*/
显示器：flex；
}
.col1{
宽度：200px；
边框：1px纯绿色；
}
.col2{
flex:1；/*这将使内容水平占据剩余空间*/
边框：1px纯红；
}

标题
此列的固定宽度为200px；并将延伸至底部
此列将采用剩余宽度，并延伸至底部

我看不出你有什么问题。您的代码段在第1行看起来很好。你在寻求什么帮助？我需要两个箱子都伸到底！读我的帖子