VerticalPanel not laying out properly

[mjeffw]

I've got a simple layout with a VerticalPanel nested inside a
DockLayoutPanel. There are three widgets in the VerticalPanel: the
first and third ones have an explicitly set height in "EM" units. The
middle widget has a height of "100%". I expect the VerticalPanel to
fill the entire space given it, with the first widget fixed to the top
of the area, and the third widget sitting at the very bottom, and the
second widget to fill the remaining space between. What I actually get
is a good bit of whitespace below the third widget.

What is the correct way to specify a VerticalPanel to act the way I
want?

Here's my UIBinder for the layout:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.status {
background-color: #9a9a9a;
}

.header {
background-color: orange;
}

.footer {
background-color: gray;
}

.bordered {
border: medium red dotted;
}
</ui:style>
<g:DockLayoutPanel unit="EM" width="100%" height="100%"
addStyleNames='{style.bordered}'>
<g:north size="1">
<g:SimplePanel addStyleNames='{style.status}'>
<g:Label text="Status Bar" width="100%" height="100%"
horizontalAlignment="ALIGN_CENTER" />
</g:SimplePanel>
</g:north>
<g:west size="20">
<g:SimplePanel width="100%" height="100%"
addStyleNames='{style.bordered}'>
<g:VerticalPanel width="100%" height="100%">
<g:SimplePanel height="2.75em" width="100%"
addStyleNames='{style.header}'>
<g:Label text="Header" width="100%" height="100%"
horizontalAlignment="ALIGN_CENTER" />
</g:SimplePanel>
<g:SimplePanel width="100%" height="150%">
<g:Label text="Body" width="100%" height="100%"
horizontalAlignment="ALIGN_CENTER" />
</g:SimplePanel>
<g:SimplePanel width="100%" height="3em"
addStyleNames='{style.footer}'>
<g:Label text="Footer" width="100%" height="100%"
horizontalAlignment="ALIGN_CENTER" />
</g:SimplePanel>
</g:VerticalPanel>
</g:SimplePanel>
</g:west>
</g:DockLayoutPanel>
</ui:UiBinder>

[mjeffw]

OK, I figured out that if I surround each widget declaration inside the VerticalPanel with <g:cell></g:cell> tags, I can use the cell height property on the second cell like this: <g:cell height='100%'>.

That makes my layout do what I want.