[jQuery UI tabs + layout] layout inside tab full screen... how?

Question

JavaScript

Good day ... I'm trying to make a splitter inside one of the tabs in this way:

<blockquote><code><font color="black"><font color="#0000ff">&lt;</font><font color="#800000">link</font> <font color="#ff0000">type</font><font color="#0000ff">=&quot;text/css&quot;</font> <font color="#ff0000">rel</font><font color="#0000ff">=&quot;stylesheet&quot;</font> <font color="#ff0000">href</font><font color="#0000ff">=&quot;css/smoothness/jquery-ui-1.8.4.custom.css&quot;</font><font color="#0000ff">/&gt;</font><br/>
<font color="#0000ff">&lt;</font><font color="#800000">link</font> <font color="#ff0000">type</font><font color="#0000ff">=&quot;text/css&quot;</font> <font color="#ff0000">rel</font><font color="#0000ff">=&quot;stylesheet&quot;</font> <font color="#ff0000">href</font><font color="#0000ff">=&quot;css/jquery-layout.css&quot;</font><font color="#0000ff">/&gt;</font><br/>
<font color="#0000ff">&lt;</font><font color="#800000">script</font> <font color="#ff0000">type</font><font color="#0000ff">=&quot;text/javascript&quot;</font> <font color="#ff0000">src</font><font color="#0000ff">=&quot;js/jquery-1.4.2.min.js&quot;</font><font color="#0000ff">/&gt;</font><br/>
&lt;script type=<font color="#A31515">&quot;text/javascript&quot;</font> src=<font color="#A31515">&quot;js/jquery-ui-1.8.4.custom.min.js&quot;</font>/&gt;<br/>
&lt;script type=<font color="#A31515">&quot;text/javascript&quot;</font> src=<font color="#A31515">&quot;js/jquery-layout.js&quot;</font>/&gt;<br/>
      &quot;Content-Type&quot; content=<font color="#A31515">&quot;text/html; charset=UTF-8&quot;</font>&gt;<br/>
    ii<br/>
  <br/>
      &lt;script type=<font color="#A31515">&quot;text/javascript&quot;</font>&gt;<br/>
      $(<font color="#0000ff">function</font>() {<br/>
        $(<font color="#A31515">&quot;#tabs&quot;</font>).tabs();<br/>
      });<br/>
    <font color="#0000ff">&lt;/</font><font color="#800000">script</font><font color="#0000ff">&gt;</font><br/>
    &quot;tabs&quot;&gt;<br/>
      <ul>
<li>&quot;#expertTab&quot;&gt;Expert mode</li>
</ul><br/>
        &quot;#userTab&quot;&gt;User mode<br/>
      <br/>
      &lt;script type=<font color="#A31515">&quot;text/javascript&quot;</font>&gt;<br/>
        <font color="#0000ff">var</font> expertLayout = <font color="#0000ff">null</font>;<br/>
        $(<font color="#0000ff">function</font>() {<br/>
          expertLayout = $(<font color="#A31515">&quot;#expertTab&quot;</font>).layout({<br/>
            resizable: <font color="#0000ff">true</font>,<br/>
            closeable: <font color="#0000ff">false</font><br/>
          });<br/>
        });<br/>
<br/>
      <font color="#0000ff">&lt;/</font><font color="#800000">script</font><font color="#0000ff">&gt;</font><br/>
      <font color="#0000ff">&lt;</font><font color="#800000">div</font> <font color="#ff0000">id</font><font color="#0000ff">=&quot;expertTab&quot;</font><font color="#0000ff">&gt;</font><br/>
        <font color="#0000ff">&lt;</font><font color="#800000">div</font> <font color="#ff0000">id</font><font color="#0000ff">=&quot;layout1&quot;</font> <font color="#ff0000">class</font><font color="#0000ff">=&quot;ui-layout-west&quot;</font><font color="#0000ff">&gt;</font><br/>
          asdf<br/>
        <font color="#0000ff">&lt;/</font><font color="#800000">div</font><font color="#0000ff">&gt;</font><br/>
        <font color="#0000ff">&lt;</font><font color="#800000">div</font> <font color="#ff0000">id</font><font color="#0000ff">=&quot;layout2&quot;</font> <font color="#ff0000">class</font><font color="#0000ff">=&quot;ui-layout-center&quot;</font><font color="#0000ff">&gt;</font><br/>
          fdsa<br/>
        <font color="#0000ff">&lt;/</font><font color="#800000">div</font><font color="#0000ff">&gt;</font><br/>
      <font color="#0000ff">&lt;/</font><font color="#800000">div</font><font color="#0000ff">&gt;</font><br/>
      <font color="#0000ff">&lt;</font><font color="#800000">div</font> <font color="#ff0000">id</font><font color="#0000ff">=&quot;userTab&quot;</font><font color="#0000ff">&gt;&lt;/</font><font color="#800000">div</font><font color="#0000ff">&gt;</font><br/>
    <font color="#0000ff">&lt;/</font><font color="#800000">div</font><font color="#0000ff">&gt;</font><br/>
  <font color="#0000ff">&lt;/</font><font color="#800000">body</font><font color="#0000ff">&gt;</font><br/>
<font color="#0000ff">&lt;/</font><font color="#800000">html</font><font color="#0000ff">&gt;</font></font><br/>
<br/>
<font color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font color="gray">Source Code Highlighter</font></a>.</font></code></blockquote><br/>

and I get this :
How can I make tabs, along with their content, be the full height of the browser window?

Answer 1

I had the same problem, I decided it may not be optimal, but as a temporary solution it came up:
var tabs = $("#tabs").tabs().css('height', $(window).height()-30);