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的{{1}}和top参数设置为与页眉和页脚相同的值：

bottom

填充父容器的容器

1 个答案: