JSFiddle - React, Tailwind, and code Playground

by alirizaadiyahsi

HTML

<div id="top" style="background-color: rgb(22, 28, 42); margin: -8px -8px auto -8px;">
    <div style="height: 2px"></div>
</div>
<div id="content"></div>
<div id="bottom" style="background: blue; min-height: 70px; margin: 2px -8px -11px -8px; background-image: url(./images/BottomBack.png);">
    <div style="background: blue; height: 60px; background-image: url(./images/BottomFront.png);"></div>
</div>

JavaScript

var DocumentHeight = document.height;

function onld() {
    var Top = document.getElementById("top").clientHeight;
    var Con = document.getElementById("content").clientHeight;
    var Bot = document.getElementById("bottom");
    var i = DocumentHeight - Top - Con - 5;
    Bot.style.height = i + "px";
    
    alert("Top :" + Top +" Con :" + Con + " Bot :" + Bot.style.height);
}
window.onload = onld;
window.onresize = onld;