title: How to make a widget fill the space in a VerticalLayout in GWT
body: <p>Edited to include suggestions below: this code block now works to generate the layout in the screen shot;</p>
  
  <p>I have a UIBinder and I'm trying to make a layout so that the content pane has a main section which fills the available width and height, pushing the footer down to the bottom. I tried this;</p>
  
  <pre><code>&lt;!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"&gt;
  &lt;ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui"&gt;
  &lt;ui:style&gt;
  .eastPanel {
          background-color: #F60;
      }
  
      .westPanel {
          background-color: #EEE;
      }
  
      .northPanel {
          background-color: #39F;
      }
  
      .southPanel {
          background-color: #99C;
      }
  
      .centrePanel {
          background-color: #FFC;
      }
  
      .headerPanel {
          font-weight: bold;
          background-color: #37B6CE;
      }
  
      .mainPanel {
          font-weight: bold;
          background-color: #123;
      }
  
      .footerPanel {
          font-weight: bold;
          background-color: #206876;
      }
  &lt;/ui:style&gt;
  &lt;g:DockLayoutPanel unit='EM'&gt;
      &lt;g:north size='8'&gt;
          &lt;g:FlowPanel styleName="{style.northPanel}"&gt;
              &lt;g:SimplePanel ui:field="northPanel" /&gt;
              &lt;g:Label&gt;This is the NORTH panel&lt;/g:Label&gt;
          &lt;/g:FlowPanel&gt;
      &lt;/g:north&gt;
      &lt;g:west size='13'&gt;
          &lt;g:FlowPanel styleName="{style.westPanel}"&gt;
              &lt;g:SimplePanel ui:field="westPanel" /&gt;
              &lt;g:Label&gt;This is the WEST panel&lt;/g:Label&gt;
          &lt;/g:FlowPanel&gt;
      &lt;/g:west&gt;
      &lt;g:center&gt;
          &lt;g:LayoutPanel styleName="{style.centrePanel}"  ui:field="centrePanel"&gt;
              &lt;g:layer top="0em" height="2em"&gt;
                  &lt;g:HTMLPanel  styleName="{style.headerPanel}"  ui:field="headerPanel"&gt;                  
                  fixed header - usually a search box
                  &lt;/g:HTMLPanel&gt;
              &lt;/g:layer&gt;
              &lt;g:layer top="2em" bottom="2em"&gt;
                  &lt;g:HTMLPanel styleName="{style.mainPanel}"  ui:field="meainPanel"&gt;
  Expanding main area
                  &lt;/g:HTMLPanel&gt;
              &lt;/g:layer&gt;
              &lt;g:layer bottom="0px" height="2em"&gt;
                  &lt;g:HTMLPanel  styleName="{style.footerPanel}" ui:field="footerPanel"&gt;
  
                  fixed footer - maybe some copyright information
                  &lt;/g:HTMLPanel&gt;
              &lt;/g:layer&gt;
          &lt;/g:LayoutPanel&gt;
      &lt;/g:center&gt;
  
      &lt;g:east size='0'&gt;
          &lt;g:FlowPanel styleName="{style.eastPanel}"&gt;
              &lt;g:Label&gt;This is the EAST panel&lt;/g:Label&gt;
          &lt;/g:FlowPanel&gt;
      &lt;/g:east&gt;
      &lt;g:south size="0"&gt;
          &lt;g:FlowPanel styleName="{style.southPanel}"&gt;
              &lt;g:Label&gt;This is the SOUTH panel&lt;/g:Label&gt;
          &lt;/g:FlowPanel&gt;
      &lt;/g:south&gt;
  &lt;/g:DockLayoutPanel&gt;
  </code></pre>
  
  <p>`</p>
  
  <p><img src="https://i.stack.imgur.com/uQenp.png" alt="enter image description here"></p>
  
  <p>This is the old code, that didnt work cause it was using a table to try to layout the main content area;</p>
  
  <pre><code>&lt;!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"&gt;
  &lt;ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:wids="urn:import:org.limepepper.JavaCart.gwt.ui.client.widgets"&gt;
  &lt;ui:style&gt;
      .mainPanel {
          background-color: #AFC;
          width: 100%;
          height: 100%;
      }
  &lt;/ui:style&gt;
  &lt;g:DockLayoutPanel unit='EM'&gt;
      &lt;g:north size='8'&gt;
          &lt;g:FlowPanel styleName="{style.northPanel}"&gt;
              &lt;g:SimplePanel ui:field="northPanel" /&gt;
              &lt;g:Label&gt;This is the NORTH panel&lt;/g:Label&gt;
          &lt;/g:FlowPanel&gt;
      &lt;/g:north&gt;
      &lt;g:west size='13'&gt;
          &lt;g:FlowPanel styleName="{style.westPanel}"&gt;
              &lt;g:SimplePanel ui:field="westPanel" /&gt;
              &lt;g:Label&gt;This is the WEST panel&lt;/g:Label&gt;
          &lt;/g:FlowPanel&gt;
      &lt;/g:west&gt;
      &lt;g:center&gt;
          &lt;g:HTMLPanel&gt;
              &lt;g:VerticalPanel&gt;
                  &lt;g:HTMLPanel&gt;
                      A heade panel
                  &lt;/g:HTMLPanel&gt;
                  &lt;g:HTMLPanel styleName="{style.mainPanel}"&gt;
                  I want this panel to fill the space
                  th
                  rh
                  tr
                  h
                  &lt;br&gt;
                  &lt;/br&gt;
                  &lt;br&gt;&lt;/br&gt;
                  &lt;p&gt;&lt;/p&gt;
  
                  &lt;/g:HTMLPanel&gt;
                  &lt;g:HTMLPanel&gt;
                      Footer here
                  &lt;/g:HTMLPanel&gt;
              &lt;/g:VerticalPanel&gt;
  
          &lt;/g:HTMLPanel&gt;
      &lt;/g:center&gt;
      &lt;g:east size='0'&gt;
          &lt;g:FlowPanel styleName="{style.eastPanel}"&gt;
              &lt;g:Label&gt;This is the EAST panel&lt;/g:Label&gt;
          &lt;/g:FlowPanel&gt;
      &lt;/g:east&gt;
      &lt;g:south size="0"&gt;
          &lt;g:FlowPanel styleName="{style.southPanel}"&gt;
              &lt;g:Label&gt;This is the SOUTH panel&lt;/g:Label&gt;
          &lt;/g:FlowPanel&gt;
      &lt;/g:south&gt;
  &lt;/g:DockLayoutPanel&gt;
  </code></pre>
  
  <p>`</p>
  
  <p><img src="https://i.stack.imgur.com/YvJ5y.png" alt="enter image description here"></p>
  
  <p>but that doesn't fill the space, I could do this programmatically, but I presume there is some GWT method to use.</p>