Div tag size for tabbar component


I am having a page having 3 portions (header, content & footer).

The three portions are denoted by the 3 div tags in the page, each having a portion.

For the content div tag, i have to specify the hardcoded size (as follows):

If i specify the height & width in relative % of screen (like 90%), it doesnot takes the size and creates the div tag of zero height & width.

Due to this zero size, whenever i try to create a dhtmlxWindow OR dhtmlxLayout component, it throws a javascript error.

Could you please provide an example in which i can specify the page with 3 div tags, having hardcoded height of top & bottom (header & footer) components, and the middle component having the dhtmlx components should take the remaining portion automatically.


Vibhav Agrawal


you can place the 3E layout into the tab. The top and bottom cells of the layout can have fixed height, another - flexible (depending of tabbar size).

var layout = tabbar.cells(tabId).attachLayout(“3E”);


dhtmlx.com/docs/products/dht … nside.html

Thanks Alex for the quick response.

I would like to tell u that the top & bottom components are not the dhtmlx component. They are generic javascript/html components which cannot be moved inside dhtmlx component.

Secondly, the tabbar (or any dhtmlx component) exists inside the second tab only.
Sample code:

and this mainTemplateBody div tag contains the dhtmlx component.

If i remove the hardcoded width & height from the above code, it is resulting in a UI with middle div tag (mainTemplateBody) size as 0 (zero). Due to which rendering a layout component in it throws a javascript error.

Could you please let me know any example with such scenario.


Vibhav Agrawal

The example of the tabbar with divs inside (html intialization):




The sample is dhtmlxTabbar/samples/01_initialization/04_init_from_html.html