Untitled

<!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="repeat.css">
    </head>
    <body>
    <div class="header-container">
    <div>
        <ul class="left">
            <li>home</li>
            <li>menu</li>
            <li>links</li>
            <li>contacts</li>
        </ul>
        <ul class="right">
            <li>home</li>
            <li>menu</li>
            <li>links</li>
            <li>contacts</li>
        </ul>
    </div>
    </div>

    <div class="main-container">

    <div class="left-column">
        <div class="wrap">

        </div>
    </div>
    <div class="main-column">
        <div>
            <p> this part should not be covered when the header
            container change its height </p>
            <p> this part should not be covered when the header
            container change its height </p>
            <p> this part should not be covered when the header
            container change its height </p>
            <p> this part should not be covered when the header
            container change its height </p>
            <p> this part should not be covered when the header
            container change its height </p>
            <p> this part should not be covered when the header
            container change its height </p>

        </div>
    </div>

    </div>
    </body>
    </html>

* {
    margin: 0px;
    padding: 0px;
}

.header-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:80px;
    background: #ccc;
    box-sizing: border-box;
    z-index: 10;
}
.left{
    padding-left: 50px;
    float:left;
}
.right{
    padding-left: 300px;
    float: left;
}
.main-container{

    position:absolute;
    margin-top: 80px;
    left:0px;
    width:100%;
    height: calc(100% - 80px);
    box-sizing: border-box;
    background-color: pink;
    z-index:1;
}
.left-column{
    position:relative;
    padding:0;
    margin:0;
    float:left;
    width:20%;
    height:100%;
    background-color: #4db6ac;
}
.main-column{
    position:relative;
    padding:0;
    margin:0;
    float:left;
    width:80%;
    height:100%;
    background-color: #00e5ff;
}

@media screen and (max-width:720px){
    .header-container{
        height: auto;
    }
    .left-column{
        display:none;
    }
    .main-column{
        width:100%;
    }
}