Html 用于DIV结构设置的CSS值

我需要设置下面的DIV结构（见下图。它告诉我超过1000个单词）

该结构由2根立柱组成。主列（左）具有可变宽度和100%高度。 右侧立柱的固定宽度为380px，高度为100%

然后在右栏中，我需要3个div。 顶部DIV的固定高度为200px，必须与顶部对齐。 底部DIV的固定高度为150px，必须与底部对齐。 中间的DIV高度可变，必须垂直填充空间

这是我的DIV设置和CSS：

。主要内容{
宽度：100%；
填充：0px；
}
.col-1{
宽度：计算（100%-380px）；
最小高度：计算值（var（--vh，1vh）*100）；
背景色：#2693FF；
浮动：左；
}
.col-2{
宽度：380px；
最小高度：计算值（var（--vh，1vh）*100）；
浮动：对；
}
.col-2-top{
高度：200px；
背景色：#00B200；
}
.col-2-middle{
身高：100%；
背景色：#FF8000；
}
.col-2-bottom{
高度：100px；
背景色：#B25900；
}

---

如果您对css的工作原理有任何疑问，请在评论中提问

我知道背景色是不相关的，但它们有助于形象化

.container{
最小宽度：768px；
宽度：100%；
显示：网格；
网格模板柱：calc（100%-380px）1fr；
最小高度：100vh；
}
.col1{
背景色：淡蓝色；
}
.col2{
显示器：flex；
弯曲方向：立柱；
}
.col2-row1{
高度：200px；
背景颜色：橙色；
}
.col2-row2{
背景色：森林绿；
身高：100%；
}
.col2-row3{
高度：150像素；
背景色：红色；
}
@介质（最大宽度：768px）{
.集装箱{
网格模板列：1fr；
}
}

1.
2.
3.
4.

我建议您使用网格布局，而不是在

周围浮动，网格布局允许您构建布局，并使用and和AREA将它们分开

对于

max width:748

只需添加，以下是它的实现方式：

正文{
填充：0；
保证金：0；
}
.主要内容{
显示：网格；
背景色：#2196F3；
网格模板区域：
“主固定顶”
“主要变量中间区域”
“主固定底部”；
背景色：#2196F3；
高度：100vh；
网格模板柱：1fr 380px；
网格模板行：200px 1fr 150px；
}
.main content>div{
颜色：#fff；
字体大小：30px；
垂直对齐：中间对齐；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
梅因先生{
网格区域：主；
背景色：#2693FC；
}
.可变中间区域{
网格区域：可变中间区域；
背景色：#FF8015；
}
.固定顶{
网格区域：固定顶部；
背景色：#00B21F；
}
.固定底部{
网格区域：固定底部；
背景色：#B2590B；
}
@仅介质屏幕和（最大宽度：768px）{
.主要内容{
网格模板区域：
“主要的”
“固定顶”
“可变中间区域”
“固定底部”；
网格模板行：300px 200px 1fr 150px；
网格模板列：100%；
高度：自动；
}
}

主要
200
自动的
150