填满父容器的容器

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

您可以通过在它们上设置显式heights 并指定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>