css3 1/3和2/3区块中3/3的垂直分割

我以为我可以使用flexbox，但我没有找到任何关于这方面的信息。我尝试使用flexbox搜索垂直布局，但没有成功

基本上，我想要的是以下场景：

我有3/3的高度，我想用css来划分它（当然，如果这是可能的话） 分两部分，一部分取1/3，另一部分取2/3

_______
| 1/3 |
-------
| 2/3 |
|     |
-------

---

我知道我可以用javascript做到这一点，这就是我目前正在做的，但我认为css3带来了这种可能性，还是我错了？

将

主体的高度和
html
设置为100%，然后将每个元素设置为您想要的高度。外接程序
溢出：隐藏
以防止div增长。垂直边距将破坏此布局，因此请使用填充


CSS:

另一种方法是使用
position:absolute
允许您将此1-2/3 div用作身体的直接子对象之外的其他位置。见此：

例如，将.container的
高度设置为
300px
，以查看效果。
如果使用的是设置高度（在px或ems中），则可以使用
位置：相对
，以便下面的任何内容仍将流动。
body, html {
    height: 100%;
}

.top {
    height: 33.3333%;
    overflow: hidden;
    background: blue;
}

.bottom {
    height: 66.6666%;
    overflow: hidden;
    background: green;
}    

body{margin:0;padding:0;}
.container{position:absolute;height: 100%;background-color:green;}
.ot{height: 33%;background-color:red;}
.tt{height:67%;background-color:yellow;}