About JavaFx Layout

I have a question about javafx layout, following is my code you can run the code directly:

import javafx.scene.Scene;
import javafx.scene.control.Button;

import javafx.scene.layout.VBox;
import javafx.scene.control.TextBox;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;

import javafx.scene.Group;
import javafx.scene.shape.Rectangle;

import javafx.stage.Stage;

/**
 * @author Administrator
 */
var headerHeight: Number = 50;
var header: Group = Group {
            var searchBox: HBox;
            content: [
                Rectangle {
                    width: bind scene.width;
                    height: bind headerHeight;
                    fill: Color.BLUE
                },
                searchBox = HBox {
                            spacing: 10
                            layoutY: bind (headerHeight - searchBox.layoutBounds.height) / 2;
                            layoutX: bind scene.width - searchBox.layoutBounds.width - 20;
                            var textBox: TextBox;
                            content: [
                                textBox = TextBox {
                                            promptText: "please input search key"
                                            columns: 20
                                            selectOnFocus: true
                                        }, Button {
                                    text: "search"
                                    strong: true
                                    action: fun开发者_如何学运维ction() {
                                        println("Button  clicked");
                                    }
                                }]
                        }
            ]
        }
var rect = Rectangle {
            width: bind 400;
            height: bind 80;
            fill: Color.YELLOW
        }
var footerHeight: Number = 50;
var footer: Group = Group {
            var bounds: Rectangle;
            content: [
                bounds = Rectangle {
                            width: bind scene.width;
                            height: bind footerHeight;
                            fill: Color.RED
                        }
            ]
        }
var scene: Scene = Scene {
            content: [
                VBox {
                    content: [
                        header,
                        rect,
                        footer
                    ]
                }
            ]
        }

function run() {
    Stage {
        scene: scene
    }
}

The scene's height is not normal. Footer's height is 50, but seems only about 30.

what's wrong, any advise?

Thanks.

For some reason the Scene isn't resizing to fit the full contents. I'm not sure why, but you may be able to work around this by setting scene.height = headerHeight + 80 + footerHeight.

Try binding to the Stage instead of Scene.