JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<div id='e' class="container">
    <div class="fix">[This is the fixed width box I want to size][This is the fixed width box I want to size][This is the fixed width box I want to size][This is the fixed width box I want to size]</div>
</div>

CSS

.container {
    position:relative;
    top:300px;
    width:300px;
    background-color:brown;
    color:white;
    padding:20px;
    margin:auto;
}
html, body {
    height:100%, ;
    width:100%;
}

JavaScript

function resizeDiv(t) {
    var p = t,
        w, rh, x, m,
        offsetTop = 0;
    do {
        if (!isNaN(t.offsetTop)) {
            offsetTop += t.offsetTop;
        }
    } while (t = t.offsetParent);
    x = window.innerHeight;
    w = p.offsetHeight;
    rh = window.getComputedStyle(p).getPropertyValue("height");
    rh = rh.replace(/\D/g, '')
    m = parseInt(document.defaultView.getComputedStyle(p).getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(p).getPropertyValue('margin-bottom'));
    x = (x - t) - (w - rh - m) - 35;
    p.style.height = x + 'px';
    console.log(x);
}




var e = document.getElementById('e');
resizeDiv(e);
window.onresize = function () {
    resizeDiv(e);
}