Css 绝对容器内的嵌套布局

我正在尝试创建类似于以下内容的布局：

+---------------------------+
|      |        2         |
|      | +----+---------+ |
|      | |    |         | |
|   1  | |  4 |    5    | |
|      | |    |         | |
|      | +--------------+ |
|      | |      6       | |
|      | +--------------+ |
+-------------------------+
1：菜单
2：集装箱
3：（为了简单起见，删除了工具栏）
4、5、6：嵌套布局

html是这样组织的

<div class="mainapp">
  <div class="menu">
  </div>
  <div class="container">
    <div class="childlayout">
      <div class="topleft"></div>
      <div class="topright"></div>
      <div class="bottom"></div>
    </div>
  </div>
</div>

正如您在CSS中看到的，childlayout类必须是

position:relative

才能允许child

position:absolute

。我需要所有这些div都以百分比为基础，因为“应用程序”可以动态调整大小，并且我希望所有内容都能适应浏览器的窗口大小

另外，我认为这是没有jQuery/JavaScript的所有CSS（当然，如果没有解决方案，我可以使用这些）

我也可以接受基于Flex布局的解决方案

有人能帮我吗

.mainapp {
  position: relative; 
  width: 100%;
  height: 100%;
}

这里的

高度：100%

是问题所在

换成

.mainapp {
      position: relative; 
      width: 100%;
      height: 100vh;
    }

你会得到你想要的

---

如果你想得到更好的解释，请阅读下面的答案

使

菜单

和

容器

位置：相对；浮动：左

远离绝对定位的一切。你会发现很难控制它。我建议你先简单一点。掌握窍门，然后增加复杂性。这是一个非常简单的示例，但请理解，这仍然没有响应。在非常小的屏幕上，如手机，这将是太窄，无法使用。对于这种情况，请使用bootstrap之类的框架。非常感谢。这允许我在不破坏代码的情况下获得所需的结果。

.mainapp {
      position: relative; 
      width: 100%;
      height: 100vh;
    }