JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="header">header</div>
    <div class="content">
        <div class="left">
            left<br>
            left<br>
            left<br>
            left<br>
            left<br>
        </div>
        <div class="right">right</div>
        <div class="left_bg"></div>
        <div class="right_bg"></div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        footer
    </div>
</div>

CSS

html,body{
    margin:0px;
    height:100%;
}

.clear{
    clear:both;
}

.main{
    position:relative;
    min-height:100%;
}

.header{
    height:50px;
    background-color: teal;
}

.content{
    position:relative;
    overflow:visible;
    padding-bottom:50px;
    background-color: grey;
    height: 100%; /* Не делает 100% */
}

.left{
    position:relative;
    float:left;
    width:100px;
    z-index:1;
}
.left_bg{
    position:absolute;
    top:0px;
    left:0px;
    bottom:50px;
    width:100px;
    background:#990000;
    z-index:0;
    height: 100%;
}

.right{
    position:relative;
    margin-left:100px;
    min-width:100px;
    z-index:1;
}
.right_bg{
    position:absolute;
    top:0px;
    left:100px;
    bottom:50px;
    right:0px;
    background:#009900;
    z-index:0;
    height: 100%;
}

.footer{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
       background-color: green;
}