I know this is really late for this question - but, I have noticed that there hasn't been a WebOutlookBar control created that acts as many customers have requested.  I do not know if the following solution is 'elegant' but here is what I am doing (without copying a bunch of ugly, unformatted html and javascript):

1. Place the WebExplorerBar in a container that sized appropriately (100% or maybe Auto).

2. Create a Template for each WebExplorerBar Group.

3. Create a CSS class to define the Height of your WebExplorerBar Group content (it will be the same height for all content areas for all groups in this design.  For example:

.webExplorerBarContentArea {

height: 250px;

}

4. Inside each Template | Content create a <section class="webExplorerBarContentArea">.

5. Use JavaScript to size the height property of the <section class="webExplorerBarContentArea">.  For example:

function cssrules() {

var rules = {}; var ds = document.styleSheets, dsl = ds.length;

for (var i = 0; i < dsl; ++i) {

var dsi = ds[i].cssRules, dsil = dsi.length;

for (var j = 0; j < dsil; ++j) rules[dsi[j].selectorText] = dsi[j];

}

return rules;

};

function css_getclass(name, createifnotfound) {

var rules = cssrules();

return rules[name];

};

function Resize_ExplorerContentWindows() {

var webExplorer = window.$find("<%=wb.ClientID %>"); //Locate and set the WindowDialog Object

if (webExplorer != null) {

webExplorerHeight = webExplorer.get_element().clientHeight; //Get the Height of the WebExplorerBar in pixels

webExplorerBarItemsCount = webExplorer.getExplorerBarItems().get_length(); //Get the ExplorerBar Menubar count

webExplorerContentHeight = webExplorerHeight - (webExplorerBarItemsCount * 30) - 3; //Explorer bar is 30px high

css_getclass('.webExplorerBarContentArea').style.height = webExplorerContentHeight + "px"; //Modify css class setting, force to pixels

...

}

(The CSS Class Management comes from AMWinter:  http://stackoverflow.com/questions/9153718/change-the-style-of-an-entire-css-class-using-javascript ).  Awesome.

In the end, the idea is to compute the size of your WebExplorerBar content area - which will ALL be the same if you want your unopened Menu Bars on the bottom - and then allow the rest of the WebExplorerBar control to size itself appropriately.  I size my WebExplorerBar content area, then my WebDataTree to fit that content area, then allow the WebSplitter to grow and shrink to fit.  One last issue is to run the webSplitter.layout() method to force the splitter to respect the sizing.  I am still using 13.2 to avoid any issues with control updates so maybe that has been fixed.  All in all not a bad solution...