title: Make jqGrid fill parent without losing its horizontal scrollbar?
body: <p>How can I get my (first) jqGrid to fill its parent container <strong>without</strong> losing its horizontal scrollbar by putting it too far down? (The scrollbar being the one created by the <code>scroll: 1</code> option, e.g., "virtual scrolling".) It seems to use the height I give it <em>without</em> allowing for the scrollbar, and so the scrollbar ends up past the bottom of the area I'm trying to keep it in. I've seen these <a href="https://stackoverflow.com/questions/2919723/make-jqgrid-fill-its-container">two</a> <a href="https://stackoverflow.com/questions/875225/resize-jqgrid-when-browser-is-resized">questions</a> about resizing the grid (and their answers), but while useful (they got me this far), they don't address the scrollbar problem.</p>
  
  <p>The page's layout looks like this (it's not mine; I <em>might</em> be able to get it changed, but it would best if I could avoid that&nbsp;&mdash; with the exception that I can do just about anything I want with <code>gridWrapper</code>):</p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="pageHeader"&gt;Header section&lt;/div&gt;
    &lt;div id="pageBody"&gt;
      &lt;div id="gridWrapper" style="height: 100%"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="pageFooter"&gt;Footer section&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    font-family: verdana, sans-serif;
  }
  #pageHeader {
    width: 100%;
    height: 99px;
    border-bottom: solid 1px #ccc;
  }
  #pageBody {
    background-color: #fff;
    position: fixed;
    top: 100px;
    bottom: 45px;
    left: 0;
    right: 0;
  }
  #pageFooter {
    background-color: #eee;
    position: fixed;
    left: 0; 
    right: 0;
    bottom: 0;
    height: 44px;
    border-top: solid 1px #ccc;
  }
  </code></pre>
  
  <p>My grid creation/sizing code looks like this (you can tell it's testing/prototyping code):</p>
  
  <pre class="lang-js prettyprint-override"><code>function createGrid(data) {
    var colNames, colModel, index, grid, gridParent, theFudge, heightFudge = 0;
  
    colNames = [
      "One", "Two", "Three", "Four", "Five",
      "Six", "Seven", "Eight", "Nine", "Ten",
      "Eleven", "Twelve", "Thirteen", "teen", "Fifteen",
      "Sixteen", "Seventeen", "Eightteen", "Nineteen", "Twenty",
      "Twenty One", "Twenty Two", "Twenty Three", "Twenty Four",
      "Twenty Five"
    ];
    colModel = [];
    for (index = 0; index &lt; colNames.length; ++index) {
      colModel.push({
        name:   "col" + index,
        id:     "col" + index,
        width:  75
      });
    }
  
    gridParent = $("#gridWrapper");
    grid = $('&lt;table id="theTable"&gt;&lt;/table&gt;').appendTo(gridParent);
    grid.jqGrid({
      datatype:    'local',
      data:        data,
      height:      gridParent.height() - heightFudge,
      width:       gridParent.width(),
      shrinkToFit: false,
      colNames:    colNames,
      colModel:    colModel,
      rownumbers:  true,
      rownumWidth: 75,
      scroll:      1
    });
  
    $(window).resize(resizeGrid);
  
    function resizeGrid() {
      grid.jqGrid('setGridWidth', gridParent.width());
      grid.jqGrid('setGridHeight', gridParent.height() - heightFudge);
      grid.trigger('reloadGrid');
    }
  }
  </code></pre>
  
  <p>You see that <code>heightFudge</code> value (which in the above is just <code>0</code>). If I don't fudge the height, the scrollbar is beyond the bottom of <code>pageBody</code>, intruding on (and being hidden by) <code>pageFooter</code>. On my browser with my fonts and my window decorations etc., etc., etc., the fudge factor (height of the scrollbar) is 24 pixels. But of course that will vary.</p>
  
  <p>How can I get the grid to fill the grid wrapper and keep its horizontal scrollbar within the height I give it? (Or how can I reliably determine the fudge factor at runtime, but that seems kludgy to me.)</p>
  
  <p><a href="http://jsbin.com/oworex" rel="nofollow noreferrer">Here's a live copy of the above</a> (<a href="http://jsbin.com/oworex/edit#javascript,html" rel="nofollow noreferrer">source link</a>), with data for the table and controls for experimenting with the fudge and such.</p>