求解div+css布局的问题

要做一个上图这样的布局
要求：
1.头部固定
2.左边栏定宽，右边主体部分占满剩下宽度
3.左边栏和右div高度始终保持一致，且左右div的高度随内容变化而变化
4.footer部分不能高过屏幕底边

第3点我没搞定。要求不要用js，只用css解决

.bigbox{
display: flex;
width: 100%;
height: 500px;
border:5px solid red;

    }
    .left{
        width: 200px;
        border:5px solid yellow;
    }
    .right{
        flex:1;
        border:5px solid green;
    }

你没有 clear：left 吧

你的 第二步骤 靠什么 解决的 ？

<div style="background-color:green;width:100px;height:100px">
    <div style="background-color:red;width:100px;height:20px">1</div>
    <div style="background-color:blue;width:100px;height:80px">
        <div style="background-color:yellow;width:30px;height:80px;float:left">2</div>
        <div style="background-color:pink;width:70px;height:80px;float:right;">3</div>
    </div>
    <div style="background-color:lightgreen;width:100px;height:20px">4</div>
</div>![图片说明](https://img-ask.csdn.net/upload/201609/05/1473062863_235002.png)

这种有动态的广告例子的布局可以不？行的话给个邮箱发给你

不好意思，工作较忙，已经发了