StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Instead of using your own CSS, use jQuery UI's built-in feature.</p> <pre><code>var tabs = $("#tabs").tabs({heightStyle: "fill"}); </code></pre> <p>From the <a href="http://api.jqueryui.com/tabs/#option-heightStyle">API documentation</a>:</p> <blockquote> <p><strong>heightStyle</strong></p> <p>Type: String</p> <p>Default: "content"</p> <p>Controls the height of the tabs widget and each panel. Possible values:</p> <ul> <li>"auto": All panels will be set to the height of the tallest panel.</li> <li><strong>"fill": Expand to the available height based on the tabs' parent height.</strong></li> <li>"content": Each panel will be only as tall as its content.</li> </ul> </blockquote> <p>Although you are right that a plain CSS solution would be very nice, since you are using JavaScript <em>anyway</em> to build the tab functionality, it will be best to use the existing capabilities of the script you already have.</p> <hr> <p><strong>UPDATE</strong>:</p> <ul> <li><p>See <a href="http://jsfiddle.net/MhEEH/45/">http://jsfiddle.net/MhEEH/45/</a> for the simplest full example. Note that it does not need any CSS <code>position</code> rules.</p></li> <li><p>You need to use <a href="http://benalman.com/projects/jquery-resize-plugin/">http://benalman.com/projects/jquery-resize-plugin/</a> (or similar) to watch the parent for size changes. Browsers only fire the <a href="http://api.jquery.com/resize"><code>resize</code> event</a> on the window itself by default, but this plugin extends support for that event to arbitrary elements being resized. </p></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload