title: jQuery tabs: panel covers tabs at 100% height
body: <p>I'm trying to use the tabs widgets of jQuery-UI having panels content to extend to the whole available space.</p>
  
  <p>Here's a simplified version of what I've got so far:
  <a href="http://jsfiddle.net/MhEEH/3/">http://jsfiddle.net/MhEEH/3/</a></p>
  
  <p>You'll see that the green panel content of #tab-1 just covers the whole page, instead of just the panel space, when I use the following CSS:</p>
  
  <pre><code> #tab-1 {
      background: green;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  </code></pre>
  
  <p>I could use "top: 27px;" to fix that, but this would collide with two things:</p>
  
  <ol>
  <li>If I change the tabs "theme", the height (27px) could possibly change</li>
  <li>If I have a lot of tabs, I'll have a second row below the first row. So my panel content would then cover this second row...</li>
  </ol>
  
  <p>A clean &amp; short solution would be fine.</p>
  
  <p>JavaScript is acceptable, while a (clean!) CSS-only solution would be preferable...</p>
  
  <p>-- Regards,</p>
  
  <p>Stefan</p>