Untitled

<!DOCTYPE html>
<html>
<head><title></title>
<script src="jquery-3.1.1.min.js"></script>
<script src="jquery.sizes.js"></script>
</head>
<body style='
margin-top:10px;
border-top-width:11px;
padding-top:12px;
border-style:solid;border-color:cyan;
padding-bottom:13px;
border-bottom-width:14px;
margin-bottom:15px;
'>
<div id='outer' style='background-color:lime;
margin-top:16px;
border-top-width:17px;
padding-top:18px;
border-style:solid;border-color:red;
padding-bottom:19px;
border-bottom-width:20px;
margin-bottom:21px;
'
>
<p>line 1</p>
<div id='inner' style='background-color:pink;
margin-top:22px;
border-top-width:23px;
padding-top:24px;
border-style:solid;border-color:blue;
padding-bottom:25px;
border-bottom-width:26px;
margin-bottom:27px;
'>
<p>line 2</p>
<p>line 3</p>
<p id='debug'></p>
</div>
</div>
<script>
console.log('------------------------------------------------------------------');
/*global $*/
"use strict";
$( window ).resize( function()
{
  var x = 0 +
//    +   $('#inner').margin().top
    +   $('#inner').offset().top
    +   $('#inner').border().top
    +   $('#inner').padding().top
        // inner content, inside height
    +   $('#inner').padding().bottom
    +   $('#inner').border().bottom
    +   $('#inner').margin().bottom
    +  $('#outer').padding().bottom
    +  $('#outer').border().bottom
    +  $('#outer').margin().bottom
    + $('body').padding().bottom
    + $('body').border().bottom
    + $('body').margin().bottom;

  var h =   $(window).height() - x;

  $('#inner')[0].style.height = h+'px';
}
);

$( window ).resize();

</script>
</BODY>
</HTML>