JSFiddle - React, Tailwind, and code Playground

by manishie

HTML

<body>
    <div id = "bottom_container" >
        <div id = "black_line_bottom" class = "black_line">

        </div>
        <div id = "white_line_bottom"class = "white_line">

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

CSS

.black_line {
position : fixed;
background-color : #0a0a0a;
width : 100%;
height : 41px;
left : 0px;
right : 0px;
}

#black_line_bottom {
bottom : 0px;
}

#bottom_container {
position : fixed;
width : 100%;
height : 90px;
left : 0px;
right : 0px;
bottom : 0px;
}

.white_line {
position : absolute;
background-color : red;
width : 100%;
height : 100%;
left : 0px;
right : 0px;
}

#white_line_bottom {
bottom : 41px;
}

JavaScript

function calcHeight(factor){
if($(window).height() > 720){
    return $(window).height() * factor / 100;
}
else{
    return 720 * factor / 100;
}
}

function getEl(x){
return document.getElementById(x)
}

function resizeHeight(){
var height = calcHeight(3.5);
getEl("black_line_bottom").style.height = height + "px";
getEl("white_line_bottom").style.bottom = height + "px";
height = calcHeight(7.8);
getEl("bottom_container").style.height = height + "px";
getEl("white_line_bottom").style.height = (height - calcHeight(3.5)) + "px";
height = calcHeight(20.5);
};

$(window).on( "resize ready" , resizeHeight);