make a sap.ui.layout.Splitter use full available height?

I'm trying to build a sappui5 app with the webIDE.

I want my app to have a toolbar at the top of the screen, and below that, a splitter with a left and a right pane. My code looks like this:

<mvc:View

  controllerName="ode.main.controller.Main"

  xmlns:m="sap.m"

  xmlns:core="sap.ui.core"

  xmlns:layout="sap.ui.layout"

  xmlns:mvc="sap.ui.core.mvc"

  xmlns:commons="sap.ui.commons"

>

  <layout:VerticalLayout

  width="100%"

  height="100%"

  >

  <m:Toolbar id="mainToolbar">

  <m:Button icon="sap-icon://activate"/>

  </m:Toolbar>

  <layout:Splitter

  orientation="Horizontal"

  height="500px"

  >

  <commons:Button width="100%" height="100%">

  <commons:layoutData><layout:SplitterLayoutData size="25%" /></commons:layoutData>

  </commons:Button>

  <commons:Button width="100%" height="100%"></commons:Button>

  </layout:Splitter>

  </layout:VerticalLayout>

</mvc:View>

So far so good. Now I want the splitter to use all available room below the toolbar. So I tried changing the height attribute of the <layout:Splitter> element to 100%. Unfortunately that does not have the desired effect - instead of using all available room below the toolbar, the entire splitter is now barely visible - as if it uses the minimum possible height, instead of the maximum possible height. Removing the height attribute altogether doesn't work either and gives me about the same result as setting it to 100%

Is there a way to achieve what I want? I'd prefer a declarative solution. Alternatively I'm fine with doing it programmatically, but then I'd appreciate a pointer on how I can find out just how many room is available, and how to listen for resize elements so I can adjust the height as necessary.