Height of Tabcontainers in Dojo

require([ "dojo/query",  "dojo/on", "dojo/dom-style",  "dijit/layout/TabContainer",   "dijit/layout/ContentPane",  "dojo/domReady!"], function(query,On,domStyle,TabContainer,ContentPane) {    var tc = new TabContainer({    style: "height: 100px; width: 100%;"  },"tabContainer");
  var cpOrg = new ContentPane({       title: "Mississippi",       content: "Mississippi"  });    tc.addChild(cpOrg);   var cpShared = new ContentPane({       title: "Utah",       content: "Utah"  });  tc.addChild(cpShared);
  var cpPrivate = new ContentPane({       title: "New York",       content: "New York"  });    tc.addChild(cpPrivate);  tc.startup();   changeTabWidth();    function changeTabWidth(){    // get the number of child of tabContainer    var number_of_child = tc.containerNode.childElementCount;        // calculate width of tabContainer and divide by number of child then     // every tab has 6px left and right padding + 1px border right so     // size must be 6+6+3-1 for the last tab = "14" that's why we remove 14 above from the width sum    var width = (domStyle.get(tc.containerNode,"width")/number_of_child) - 14;        query(".dijitTabInner.dijitTabContent.dijitTab").forEach(function(element){      domStyle.set(element, {        width: width+"px"      });    });  }    // event to change width after window size changed   On(window,"resize",function(){   changeTabWidth();  })  });

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script><link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/><div class="claro">  <div id="tabContainer"></div></div>

Sub-widgets won't render (will have 0 height) in Dojo

Indeed there is a typo, as Frode mentioned, but you will still need to click one of the tabs if you want your tab content to appear in the SubWidget.

I suggest that you correct the typo and make your widget subclass ContentPane rather than _WidgetBase to solve this issue, as ContentPanes know how to resize themselves, like this :

declare('SubWidget', [ContentPane, _TemplatedMixin, _WidgetsInTemplateMixin], {

      templateString: ''...

See http://jsfiddle.net/psoares/YwWst/

By the way, there is no need to specify widgetsInTemplate : true in 1.8. Adding _WidgetsInTemplateMixin is enough...

TabContainer displays Tabs only at windowresize

Some notes to your code:

The region attribute is here not required. Its only used to indicate the position for BorderContainer children.

var bordercontainer = new dj_BorderContainer({
  style: "height: 100%; width: 100%;",
  gutters: false,
  region: "top"
});

You don't need to set a width and height on your ContentPane, let this do the TabContainer.

var contentpane = new dj_ContentPane({
  title: "Calculation " + (i + 1),
  content: "content",
  style: "height: 100%; width: 100%;"
});

I've created a sample for you, maybe this helps you out.

require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",  "dijit/layout/ContentPane", "dojo/domReady!"],function(BorderContainer, TabContainer, ContentPane) {    // first create the BorderContainer without any arguments.  let bc = new BorderContainer({}, "bc");    // then create your TabContainer with region center.  let tc = new TabContainer({    region: 'center'  }, document.createElement("div"));    // add it to your BorderContainer  bc.addChild(tc);      // then create three tab panes (ContentPane) and add them to your TabContainer  let cp = new ContentPane({    content: "My tab pane!",    title: "My tab title"  }, document.createElement("div"));  tc.addChild(cp);    let cp2 = new ContentPane({    content: "My second tab pane!",    title: "My second tab title"  }, document.createElement("div"));  tc.addChild(cp2);      let cp3 = new ContentPane({    content: "My closable tab pane!",    title: "My closable tab title",    closable: true  }, document.createElement("div"));  tc.addChild(cp3);    // call startup on your BorderContainer. startup of BorderContainer will call also the startup methods of all children (TabContainer, ContentPane's).  bc.startup();
});

body, html {  height: 100%;  width: 100%;  overflow: hidden;  margin: 0 auto;}

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" rel="stylesheet"/><script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script><span class="tundra" style="width: 100%; height: 100%;">  <div id="bc" style="width: 100%; height: 100%;"></div></span>

dojo/parser::parse() error Error: Tried to register widget with id==dijit_layout_ContentPane_0 but that id is already registered