JSFiddle - React, Tailwind, and code Playground

by James Gill

HTML

<table id="wrapper" border="1">
    <tbody>
        <tr>
            <td colspan="2" height="40">
                header
            </td>
        </tr>
        <tr>
            <td width="40%" align="center" valign="middle" bgcolor='silver'>
                <div class="innerWrapper">
                    <div id="fullHeight">should be 100% of silver cell</div>
                </div>
            </td>
            <td>text</td>
         </tr>
         <tr>
            <td colspan="2" height="40">
                bottom panel
             </td>
        </tr>
    </tbody>
</table>

CSS

html{
    height:100%;
}
body{
    margin:0;
    padding:0;
    position: relative;
    height:100%;
    overflow:hidden;
}
#wrapper{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    right:0;
    bottom:0;
}
#fullHeight{
    position:absolute;
    border:dashed;
    top:0;
    bottom:0;
    left:5%;
    right:5%;
}
.innerWrapper{
    position:relative;
    width:100%;
}

JavaScript

$.fn.iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease = function() {
    var $el;
    return this.each(function() {
    	$el = $(this);
	    $el.css({"height":"auto"});
        $el.css({
            "height"  : $el.parent().height()
        });  
    });
};
$('.innerWrapper').iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease();
$(window).on('resize', function(){
	$('.innerWrapper').iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease();
});