JSFiddle - React, Tailwind, and code Playground

by dusset

HTML

<p id="height"></p>
<input id="test">
<p id="result"></p>
<div id="box"></div>

CSS

#box {
    width:100%;
    background:#ff0000;
    position:relative;
    float:left;
    clear:both;
}

JavaScript

function setHeight() {
    var x = $(window).height(); //Gets viewport height
    document.getElementById("height").innerHTML = x;  //Shows viewport height in <p>
    document.getElementById("test").value = x; //Shows viewport height in <input>

    var math = x - 200; //Result - viewport height minus 200px
    document.getElementById("result").innerHTML = math; //Shows result

    var box = document.getElementById("box"); //Gets element which we want to resize by id
    box.style.height = math + 'px'; //Resizes the div
}
//Calls the function when document is ready
$(window).ready(function() {
    setHeight();
});
//Calls the function when user resizes browser window
$(window).resize(function() {
    setHeight();
});