Flexible component height size to fill the space available on stage

Question

I am trying to create a layout in flex using mxml, the layout contains the Canvas and Box component. The layout should always be such that the Box is located on the lower border of the application and has a fixed height, while the canvas fills the remaining area of ​​the scene and does not overlap with the box.

My MXML is as follows:

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" layout="absolute" clipContent="false" verticalGap="0">
    <mx:Canvas width="100%" height="100%" />

    <mx:Box width="100%" height="30"></Box>
</mx:Module>

I tried using dynamic linking to set the height on the canvas (height = "{this.stage.height - 30}"), but it gives incorrect results.

Is there an easy way to achieve what I get after setting the height using ActionScript?

Answer 1

, :

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    width="100%"
    height="100%"
    >
        <mx:Canvas left="0" right="0" top="0" bottom="0" />
    <mx:HBox 
        width="100%"
        height="50"
        bottom="0"
        >
             ....
    </mx:HBox>
</mx:Application>

, !

Answer 2

<Module layout="vertical" xmlns="...">
  <Canvas width="100%" height="100%">
  <HBox width="100%" height="30"/>
</Module>

layout="vertical", Module VBox. Canvas 100% , HBox , .

Answer 3

;

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" layout="absolute" clipContent="false" verticalGap="0">
    <mx:Canvas bottom="30" left="0" right="0" top="0" />

    <mx:Box width="100%" height="30"></Box>
</mx:Module>

, Canvas , Box. bottom 0 , .