JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div id="container">
  <div id="output2"></div>
  <div>top content</div>
  <div>top content</div>
  <div>top content</div>
  <div>top content</div>
  <div>top content</div>
  <div id="topPadding">top content</div>
  

  <div id="inner">    
    <div>
      <h1>Top Bar</h1>
      Always visible
    </div>
    <div id="centerContent">
      <div>
        <h2>Content 1</h2>
      </div>
      <div>
        <h2>Content 2</h2>
      </div>
        <div>
        Center content shrinks
      </div>
      <div>
        <b>end center content</b>
      </div>  
    </div>
      
    <div id="footer">
      <div>
        Footer is always be visible
      </div>
      <input type="button" value="Save" />
      <input type="button" value="Cancel" />      
    </div>
  </div>
</div>



<div id="bottomPadding">bottom content</div>
<div>bottom content</div>
<div>bottom content</div>
<div>bottom content</div>
<div>bottom content</div>
</div>

CSS

#inner {
 padding: 20px;
 max-height: 380px;
 overflow-y: auto;
 max-width: 150px;
 border: solid red;
 margin-left: 250px;
}

#topPadding{
   padding-bottom: 40px; 
 }
 

#bottomPadding{
  padding-top: 20px;  
}

#footer {
  display: "absolute"
}

#centerContent {
  border: solid blue;
}

JavaScript

window.addEventListener("resize", updateDimensions);

function updateDimensions(){
  var windowHeight = $(window).height();
  var modalHeight = $('#inner').height();
  var position = $('#inner').position();//position.top bounces between values ~10 and values around ~260 with only minor changes in window sizes on chrome on my mac
  var offset = $('#inner').offset();  
  
  var calculatedHeight = windowHeight - modalHeight - position.top;
  
  var result = 'position: ' + JSON.stringify(position) 
               + ' offset: ' + JSON.stringify(offset)
               + ' windowHeight: ' + JSON.stringify(windowHeight)
               + ' calculatedHeight: ' + JSON.stringify(calculatedHeight);

  $('#output2').text(result);
  
  $('#inner').css('max-height',calculatedHeight);
}