Question

I have a structure that looks like this: http://peterned.home.xs4all.nl/examples/csslayout1.html – where the middle div resizes to fit the height of the window.

Inside the middle div I have tabs, but upon calling the .tabs() method, the code automatically resizes the tabs to fit the height of the content. I want to prevent that behaviour since I’ll be replacing the content of the tabs dynamically and the originally calculated height will be wrong.

I’ve tried setting the height of the tabs in CSS but it just ignores it.

how can I accomplish this?

* edit *

I’ve posted code at jsfiddle: http://jsfiddle.net/tmLZS/ from which you can see that the tabs resize themselves (in IE 9 and Chrome 14 under Windows) to the height of their content.

I want to have them be as large as possible given the window size, and have them scroll when content exceeds window size.

Answer 1

This is a similar problem as the 100% height/min-height for the content. This post has some good discussions on this topic.

I have fiddled with this issue a few times myself, and have found it very time consuming (and often unfeasible) to resolve this issue with pure CSS. Often what it takes is a line or two of JavaScript to achieve the same effect. For example, for the jsfiddle you provided, all you need to do is to set the height of #tabs to the height of document:

$('#tabs').tabs().height($(document).height());

See it in action: http://jsfiddle.net/william/tmLZS/3/.

Note that I also changed the box-sizing of #tabs, so borders and paddings are included in the height. You don’t have to do this (this property is CSS3), but that means you will need to account for the borders and paddings when calculating the height.