window_resize.html

<!DOCTYPE html>
<html>
<head>
    <title>Div resize with Window resize</title>
</head>
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .header{
        width: 100%;
        display: flex;
        background-color: brown;
    }
    .content{
        width: 100%;
        background-color: black;
        display: flex;
    }
    .footer {
        width: 100%;
        display: flex;
        height: 50px;
        background-color: blue;
    }
</style>
<body>
    <div class="header">
        <h2>Div resize with Window resize</h2>
    </div>
<div class="content"></div>
<div class="footer"></div>
<script>
    const divResize = (h, c, f) => {
        const w_height = window.innerHeight;
        const h_height = document.querySelector('.'+h).offsetHeight;
        const f_height = document.querySelector('.'+f).offsetHeight;
        const c_height = w_height - (h_height + f_height);
        console.log(w_height, c_height);
        document.querySelectorAll('.'+c)[0].style.height = c_height + 'px';
    };
    // Attaching the event listener function to window's resize event
    window.addEventListener("resize", divResize('header', 'content', 'footer'));
</script>
</body>
</html> 