JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Body and HTML 100% Height</title>
  </head>
  <body>
    <table class="main">
      <tr>
        <td class="content">
          <div class="wrapper">
            <p>This table will take up a minimum 100% height of available viewport no matter the resolution.</p>
            <div class="hide hugeHeight">
              <p>Haha, overflowed div.</p>
            </div>
            <p><span class="causeOverFlow">Click Here to Overflow the Table</span></p>
            <p>When content overflows the table and causes it to grow in height, the body and html element height will grow as well which doesn't normally happen making 100% table heights less than ideal. </p>
          </div>
        </td>
      </tr>
      <tr>
        <td class="footer">
          &copy; 2016
        </td>
      </tr>
    </table>
  </body>
</html>

CSS

html, body {width:100%; height: 100%; margin: 0px; padding: 0px;}
body {
  background: silver; /* Old browsers */
  background: -moz-linear-gradient(top,  #deefff 0%, #98bede 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #deefff 0%,#98bede 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #deefff 0%,#98bede 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff',   endColorstr='#98bede',GradientType=0 ); /* IE6-9 */
}
.main {width: 80%; margin-left: auto; margin-right: auto; height: 100%; background-color: white; padding:0px; border:0px; border-collapse: collapse;}
td.content{vertical-align: top;}
td.footer {height: 40px; font-size: 10px; color: white; background-color: black; text-align: center; vertical-align: middle;}
.main td {padding: 0px;}
div.wrapper{padding-left: 1em; padding-right: 1em;}
span.causeOverFlow{cursor: pointer; background-color: yellow; color: red; text-decoration: underline;}
.hide{display:none;}
.hugeHeight{height:4000px; background-color: green;}

JavaScript

$( document ).ready(function() {
	$(".causeOverFlow").click(function(e){
  	if($(".hugeHeight").hasClass('hide')){
    	$(".hugeHeight").removeClass('hide');
      $(".causeOverFlow").text('Click Here to Collpase the Expanded Section');
    }else{
   		$(".hugeHeight").removeClass('hide').addClass('hide');
      $(".causeOverFlow").text('Click Here to Overflow the Table');
    }
  });
  $(".causeOverFlow").trigger("click");
});