title: How can I get a table to auto scroll (y) if necessary with a dynamic height?
body: <p>Essentially I want a table to show as much as will fit in your browser window.  But instead of scrolling the whole page down, I need only the tbody to scroll.  Can you help?</p>
  
  <p>Here's a fiddle to help: <a href="http://jsfiddle.net/drKpT/" rel="nofollow">http://jsfiddle.net/drKpT/</a></p>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="header"&gt;&lt;h1&gt;This is my header&lt;/h1&gt;&lt;/div&gt;
      &lt;div id="sidebar"&gt;&lt;ul&gt;&lt;li&gt;Nav 1&lt;/li&gt;&lt;li&gt;Nav 2&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div id="content"&gt;
          &lt;div id="title"&gt;&lt;h2&gt;This is my content title&lt;/h2&gt;&lt;/div&gt;
          &lt;div id="data"&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;&lt;th&gt;id&lt;/th&gt;&lt;th&gt;name&lt;/th&gt;&lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Pssssssst... &amp;nbsp; &amp;nbsp; I'd like this area (tbody) to scroll if it's taller than the window you're in&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;abc&lt;/td&gt;&lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;&lt;p&gt;This is my footer&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>div,ul,li,h1,h2,td,tr {
      padding:0;margin:0;
  }
  #container {
      width:100%;
      background:#efefef;
  }
  #header {
      width:100%;
      display:inline-block;
      background:#dedede;
  }
  #sidebar {
      display:inline-block;
      width:20%;
      background:#cdcdcd;
  }
  #content {
      display:inline-block;
      width:80%;
      background:#bcbcbc;
  }
  table {
      border-collapse:collapse;border-spacing:0;
      width:100%;
  }
  tbody {
      border:3px dashed;
      width:100%;
  }
  #footer {
      width:100%;
      background:#ababab;
  }
  </code></pre>