JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header_wrapper">Шапка</div>
<div id="middle_wrapper" class='ndra-container' >Контент
</div>
<div id="footer_wrapper">Подвал</div>

CSS

/* * {
 margin:0;
 padding:0;
 }
ul li  {
	 list-style: none outside none;
 }

 a  { 
	 text-decoration:none 
 }
*/
 html,body {
 background: none;
 //height: 100%;
 //width: 100%;
// margin: 0;
// padding: 0;
 }

#header_wrapper {
 display: block;
 position: relative;
height: 30px;
 width: 100%;
 margin: 0 auto 0;
 top: 8px;
 background-color: green;
 }
#middle_wrapper
{
	margin: 11px auto 0px;
	width: 1000px;
	height:300px;
	background-color: green;
}
#footer_wrapper
{
  	//width: 1000px;
	//bottom: 5px;
    //height:32px;
	background-color: black;
    margin-top: 10px;
   }

JavaScript

$(function() {
    $("body").css({padding:0,margin:0});
      var f = function() {
        $(".ndra-container").css({position:"relative"});
        var h1 = $("body").height();
        var h2 = $(window).height();
        var d = h2 - h1;
        var h = $(".ndra-container").height() + d;    
        var ruler = $("<div>").appendTo(".ndra-container");       
        h = Math.max(ruler.position().top,h);
        ruler.remove();    
        $(".ndra-container").height(h);
      };
      setInterval(f,1000);
      $(window).resize(f);
      f();
     
    });