title: How to make a fluid-container fit vertically (with scrolling only on the container) on a web page?
body: <p>I have a web app I am trying to make that takes a fluid-container inside of a grid (col-md-6), and fits its contents horizontally and vertically onto the page. </p>
  
  <p><img src="https://photos-5.dropbox.com/t/0/AAArdIM6UwfZ2svQ6TDBEDuZJ_8KmiCqQrezNomOKGcvNg/12/105532782/png/1024x768/3/1402808400/0/2/Capture.PNG/9YlDGoCtb7UFfZJ_akF2oJWq0SGhdOd2EiUHJM-kKec" alt="Layout"></p>
  
  <p>The idea is to make it so the page in the browser does not scroll, but the content in the grid have 'overflow: auto;' set, so if need be the grid contents can scroll. In the picture, the table is running off the screen and the whole page can scroll, instead of just the contents.</p>
  
  <p>So the grid should be fixed, and has a nav bar on all four sides, almost like a frame, that the center contents should be flushed with. </p>
  
  <p>I've tried setting that center panel to position:fixed; but that takes it out of the flow of the html, so it isn't responsive. So I really need all of the content to be flush with the footer, and then respond accordingly horizontally and vertically depending on the screen size.</p>
  
  <p>Any help or code would be awesome.</p>