填充父容器的容器

Question

我有一个容器，它的高度可以在运行时改变。顶部有一些固定高度的项目，底部有一些固定高度的项目，我希望在它们之间有一个容器来填满剩余的空间。

下面是我目前拥有的mxml的摘录。我希望contentContainer自动调整大小。compA和compB是实际实现中的mxml组件，因此它们的结构(尽管不一定是容器类型)需要保持得体。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%">
    <mx:VBox width="500" height="500" id="compA">
        <mx:VBox width="100%" id="compB">
            <mx:HBox width="100%">
                <mx:Label text="Header" />
            </mx:HBox>

            <mx:VBox id="contentContainer" width="100%" height="100%">
                <mx:Canvas verticalScrollPolicy="on" width="100%" height="100%">
                    <mx:VBox width="100%" height="100%">
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                        <mx:Label text="Content" />
                    </mx:VBox>
                </mx:Canvas>
            </mx:VBox>
        </mx:VBox>
        <mx:HBox width="100%">
            <mx:Label text="Footer" />
        </mx:HBox>
    </mx:VBox>
</mx:Application>

Answer 1

通过在页眉和页脚上设置显式的height并指定top和bottom参数，可以将页眉和页脚锚定在屏幕的顶部和底部。然后将主内容VBox的top和bottom参数设置为与页眉和页脚相同的值：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%">
    <mx:HBox top="0" height="50">
        <mx:Label text="Header" />
    </mx:HBox>
    <mx:VBox id="contentContainer" width="100%" top="50" bottom="50">
        <mx:Canvas verticalScrollPolicy="on" width="100%" height="100%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="Content" />
                                    <!-- etc... -->
                <mx:Label text="Content" />
            </mx:VBox>
        </mx:Canvas>
    </mx:VBox>
    <mx:HBox width="100%" bottom="0" height="50">
        <mx:Label text="Footer" />
    </mx:HBox>
</mx:Application>