Html Div css布局定位

多年来我一直在尝试这种布局。一切都没有用。。。 我是一个后端程序员，我喜欢这一部分，但当涉及到css和定位时，我完全没有用

我怎么得到这个？数字3是文本区域，1、4和3必须为100%宽度。谢谢你的帮助，如果有人能给我指点一个好的css图坦卡门之类的东西，我将不胜感激。 将宽度和高度应用于每个元素，我们可以得到正确的大小和位置

html，正文{
宽度：100%；
身高：100%；
保证金：0；
}
#一个{
宽度：100%；
身高：10%；
背景颜色：蓝色；
}
#两个{
浮动：左；
宽度：10%；
身高：90%；
背景颜色：绿色；
}
#三{
宽度：100%；
身高：80%；
背景颜色：浅灰色；
}
#四{
宽度：100%；
身高：10%；
背景颜色：灰色；
}

---

我的朋友，Flexbox是你的朋友。标记和CSS将使用由flex grow和flex direction组成的一系列规则。需要大量的打字才能让您了解所有的机制，但是Chris Coyier提供了一套非常好的文档

.node-1{背景：红色；显示：柔性；柔性方向：列；高度：90vh；}
.node-2{背景：蓝色；显示：flex；flex-grow:1；}
.node-4{背景：绿色；显示：flex；flex方向：列；flex增长：1；}
.node-4-content{flex-grow:1；}
.node-3{背景：黄色；}

节点1
节点2
节点4
节点3

我会研究CSS网格。几乎任何你想要的布局都可以通过使用来实现，而获得这样一个基本布局并不需要太多

如果您感兴趣，以下是一些教程：

.header{
网格区域：标题；
背景：道奇蓝；
}
.侧导航{
网格区域：sidenav；
背景：绿色；
}
.内容{
网格区域：内容；
}
.文本区{
网格区域：文本区域；
背景：灰色；
}
文本区{
身高：100%；
}
.容器液体{
最小高度：500px；
显示：网格；
网格模板列：1fr 2fr；
网格模板区域：
“标题”
“侧导航内容”
“侧导航内容”
“侧导航文本区域”
}

收割台区域
侧导航
Lorem ipsum dolor sit amet，奉献精英。通用错误，请参阅。临时性的天意，让人厌恶的是你的生活。假设错误，但铜酸盐的含量不超过最低值

内容区