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>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.