Flex 4 - Vertical layout problem on TitleWindow - user-interface

Question

This must be a simple problem, but I can't get my head around it. I have a resizable title window. Inside I just want a VGroup to hold the contents of the form and an HGroup to have a few buttons at the bottom. Very standard stuff.
<!-- Content -->
<s:VGroup id="content" height="340" width="100%">
...more stuff in here...
</s:VGroup>
<!-- Buttons -->
<s:HGroup id="buttonGroup" width="100%">
...buttons in here...
</s:HGroup>
Horizonal resizing works fine. However, I want it to behave such that when the TitleWindow is resized vertically that the buttons stay in the same place relative to the TitleWindow and the content VGroup is resized vertically. But I don't know what to set the height of the VGroup to?
Ideally it would be like this:
height="{this.parent.height - buttonGroup.height - top*
or something like that....

Answer 1

You can also try the following trick:
<s:VGroup id="layoutContainer" width="100%" height="100%">
<s:SkinnableContainer id="content" height="100%">
....content here....
</s:SkinnableContainer>
<!-- Buttons -->
<s:HGroup id="buttonGroup">
... buttons here...
</s:HGroup>
</s:VGroup>
The intent is to make the content-container take as mush as possible vertical space within the VGroup.
Let me know if that worked for you!

Answer 2

Use constraint properties.
You could try for AS:
content.top = 0;
content.bottom = buttonGroup.height;
buttonGroup.bottom = 0;
But better put it to MXML definition of the components
<s:VGroup id="content" top="0" bottom="{buttonGroup.height}" width="100%">
...more stuff in here...
</s:VGroup>
<s:HGroup id="buttonGroup" bottom="0" width="100%">
...buttons in here...
</s:HGroup>
Add some paddings and margins if you like