asdasdasd

*{
    margin: 0;
    padding: 0px;
    height: 100%;
}
.header{
    width: 100%;
    height: 200px;
    background-color: red;
    bottom: 100%;

}
.content{
    background-color: green;
    width: 100%;
    min-height: 700px;
    max-height: calc(100% - 400px);

}
.content2{
    width: 80%;
    height: 500px;
    background-color: purple;
    float: left;

}
.content3{
    width: 20%;
    height: 700px;
    background-color: black;
    float: right;

    }
.footer{


    width: 100%;
    height: 200px;
    background-color: yellow;

}


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel = "stylesheet" type="text/css" href = "style/style.css">
        <title>task 3</title>
    </head>
    <body>
        <div class = "header">

        </div>
        <div class = "content">
            <div class  = "content2"></div>
            <div class  = "content3"></div>

        </div>
        <div class = "footer"></div>
    </body>
</html>