ChrisJJ

Untitled

Oct 9th, 2016
93
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head><title></title>
  4. <script src="jquery-3.1.1.min.js"></script>
  5. <script src="jquery.sizes.js"></script>
  6. </head>
  7. <body style='
  8. margin-top:10px;
  9. border-top-width:11px;
  10. padding-top:12px;
  11. border-style:solid;border-color:cyan;
  12. padding-bottom:13px;
  13. border-bottom-width:14px;
  14. margin-bottom:15px;
  15. '>
  16. <div id='outer' style='background-color:lime;
  17. margin-top:16px;
  18. border-top-width:17px;
  19. padding-top:18px;
  20. border-style:solid;border-color:red;
  21. padding-bottom:19px;
  22. border-bottom-width:20px;
  23. margin-bottom:21px;
  24. '
  25. >
  26. <p>line 1</p>
  27. <div id='inner' style='background-color:pink;
  28. margin-top:22px;
  29. border-top-width:23px;
  30. padding-top:24px;
  31. border-style:solid;border-color:blue;
  32. padding-bottom:25px;
  33. border-bottom-width:26px;
  34. margin-bottom:27px;
  35. '>
  36. <p>line 2</p>
  37. <p>line 3</p>
  38. <p id='debug'></p>
  39. </div>
  40. </div>
  41. <script>
  42. console.log('------------------------------------------------------------------');
  43. /*global $*/
  44. "use strict";
  45. $( window ).resize( function()
  46. {
  47.   var x = 0 +
  48. //    +   $('#inner').margin().top
  49.     +   $('#inner').offset().top
  50.     +   $('#inner').border().top
  51.     +   $('#inner').padding().top
  52.         // inner content, inside height
  53.     +   $('#inner').padding().bottom
  54.     +   $('#inner').border().bottom
  55.     +   $('#inner').margin().bottom
  56.     +  $('#outer').padding().bottom
  57.     +  $('#outer').border().bottom
  58.     +  $('#outer').margin().bottom
  59.     + $('body').padding().bottom
  60.     + $('body').border().bottom
  61.     + $('body').margin().bottom;
  62.  
  63.   var h =   $(window).height() - x;
  64.    
  65.   $('#inner')[0].style.height = h+'px';
  66. }
  67. );
  68.  
  69. $( window ).resize();
  70.  
  71. </script>
  72. </BODY>
  73. </HTML>
RAW Paste Data