Not filling full column height in ColumnLayout

[eragon]

I have a simple QML design that consists of 2 components side by side then another component (named HUD) below that. The HUD should fill the remaining height but instead it leaves a gap.

How can I make HUD fill all the available width. I am trying to achieve the 2nd image.

Page {
    width: parent.width
    height: parent.height

    title: qsTr("Home")

    ColumnLayout {
        anchors.fill: parent

        RowLayout {
            Layout.fillWidth: true;

            StatusBar {
                width: parent.width * 0.5;
                height: parent.height * 0.1
                anchors.left: parent.left;
            }

            MenuBar {
                width: parent.width * 0.5;
                height: parent.height * 0.1
                anchors.right: parent.right;
            }
        }

        // The below should fill the remaining height but its not?
        HUD {
            Layout.fillWidth: true;
            Layout.fillHeight: true;
        }

    }
}

[CKurdu]

@eragon
Hi,
Try layout parameters like below.

 ColumnLayout {
        anchors.fill: parent
        Item{
        Layout.preferredHeight: parent.height * 0.1
        Layout.preferredWidth:parent.width
        RowLayout {
            id:r
            anchors.fill:parent
            StatusBar {
                Layout.preferredWidth: parent.width * 0.5;
                Layout.preferredHeight: parent.height
            }

            MenuBar {
                Layout.preferredWidth: parent.width * 0.5;
                Layout.preferredHeight: parent.height
            }
        }
        }

        // The below should fill the remaining height but its not?
        HUD {
            Layout.fillWidth: true;
            Layout.fillHeight: true;
            Layout.alignment: Qt.AlignTop
        }

    }

[dheerendra]

As shown by the @CKurdu when you are using the Layouts, use preferredWidth & preferred Height properties. Avoid making mix and match like the above.