First Line
This Tab has style="min-height:150px;height:150px;".
The height is specified for IE6 only.
First Line

Try to add/remove the content of this Tab (use the buttons below).

-- Last Line --

Second Tab

This Tab hash style="min-height:200px;height:200px;".

The height is specified for IE6 only.

-- Last Line --

Third Tab
Second
Third
Forth
This Tab hash style="min-height:150px;height:150px;". The height is specified for IE6 only.
First Line
Last Line
First Line
First Line
First Line
First Line
First Line
First Line
First Line
First Line
-- Last Line --

1. For the dojo TabContainer widget we have to specify the exactly height of the dojoType="dijit.layout.TabContainer".
2. The height that specified as 'auto' or '%' is ignored. You can see such structure in the DOM but not on the screen.
3. The min-height is ignored.
4. The height of each ContentPane of the TabContainer is the same (see explanation below).
5. If the predefined height is not enough for the contents of the ContentPane - the inner vertical scroll bar is appeared.

This behavior of the TabContainer serves many situation. But if you want to avoid the inner scrolling you have to predefine a big enough (the bad 'measure') height, and the ContentPane(s) with a small amount of information will have the same height without any reason.
If the content of a ContenPane is dynamically adjustable (can be increased/decreased) you have uncontrolled situation for rendering your information inside of the ContentPane.

The doLayout="false" can help to solve problems related with the point 4, but it is buggy in IE (put mouse over here to see image).
The sentence: 'it is buggy in IE', has a different meaning here for the Dojo developers and me. For me, that means "dosn't work".

I need the next behavior for a TabContainer :

1. each ContentPane inside of a TabContainer must have its own height setting;
2. their height must be adjustable depends of a content height automatically;
3. if the height of a content is too small - use predefined min-height;
4. the height of a ContenPane must be dynamically adjustable;
5. no inner scrolling (for any cases);
6. it must be compattible with FF3, IE6-7(8), the latest version of Opera and Safary.

1. Download and include this script into your dojo application (javascript source).
2. Put doLayout="false" parameter for your dojoType="dijit.layout.TabContainer".
3. Include into each dojoType="dijit.layout.ContentPane" style (or use an external css):
   style="height:200px;min-height:200px"
   
   The height is optional and used for initialization of the ContentPane in IE6 only. If height is omitted the value of the min-height converts to the height for IE6 only. If the height and min-height are omitted the IE6 will display nothing. For the rest of browsers the value of height resets for auto.
   The min-height is optional and will work as expected for the modern browsers.
   The number of the pixels can be unique for each ContentPane.
   The height of a ContentPane is not the same as a height of the TabContainer.


4. At the bottom of your html file put the following lines:

   <script>
   dojo.addOnLoad(function(){
   	initTabChildAdjustment('mainTabContainer');
   });
   </script>
   

   The 'mainTabContainer' is the id of the dijit.layout.TabContainer.


5. Important: in order to manage dynamic changes of the height of ContentPane you have to use the following: for each event, that can happen inside of the TabContainer and can change the height of the ContentPane you have to add the following line:

   dojo.publish('mainTabContainer'+'_adjust-Child-Height',[]);
   

   The 'mainTabContainer' is the id of the dijit.layout.TabContainer.

---

1. The IE6 still uses the shared (biggest) height for all ContentPanes.
   But even though a problem still exists here is some improvement: a) no inner scrolling, b) if the value of height is bigger than the predefined one, the height is adjusted to the content.


2. The main problem of this structure is a resizing. To manage the 'onresize' event it is too expensive, but you can workaround this problem using the min-width for a wrapper of the TabContainer (I use it here), or width for IE6.
   The vertical resizing doesn't collapse this sturcture.


3. Not well tested with another browsers.
4. Not well tested as a nested TabContainer (see solution).
5. The Dojo is a open source application and can be dramatically improved/fixed/changed in any time. Any changes for the dojo TabContainer can be a cause of a problem with this approach.
   Current Dojo Version: 1.2.2