JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="header">Шапка</div>
    <div class="box">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
    <div class="middle">
        <div class="list">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        Футер
    </div>
</div>

CSS

.wrapper {
    position: relative;
    width: 900px;
}

.header {
    height: 50px;
    background-color: pink;
}

.box {
    background-color: green;
    position: absolute;
    bottom: 0;
}

.middle {
    margin: 0 0 70px;
}

li {
    float: left;
    background-color: #333333;
    width: 100px;
    height: 50px;
    margin: 10px;
}

.clear {
    clear:  both;
}

.footer {
    background-color: #cc0000;
    height: 100px;
}

JavaScript

var footer_height = $('.footer').height();
var box_height = $('.box').height();
$('.middle').css({
    marginBottom: box_height + 20
});
$('.box').css({
    bottom: footer_height + 20
});