JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sbcontainer">
    DIV 1
    <div id="sbcontent">
        DIV 2
        <table id="sbmaintable" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    TABLE
                </td>
            </tr>
        </table> <!-- END MAINTABLE -->
    </div> <!-- END CONTENT -->
</div> <!-- END CONTAINER -->

CSS

html, body { 
    height: 100%;
    margin: 0;
    padding: 0;
}
#sbcontainer {
    height: 100%;
    background: red;
    margin: 0;
    padding: 0;
    
}
#sbcontent {
    height: 100%;
    background: blue;
    margin: 0;
    padding: 0;
}
#sbmaintable {
    position: absolute;
    height: 100%;
    background: green;
    margin: 0;
    padding: 0;
}

JavaScript

$('#sbcontainer, #sbcontent, #sbmaintable td').each(function() {
    $(this).prepend( $(this).outerHeight(true) );
});