Simple application layout footer positioning

Hi

I am trying to achieve a very basic application layout… There should be a Header on top, a body area in the middle and a footer at the bottom of the browser window.

I want the footer to be at the bottom of the browser window all the time… I thought it was simple but has been struggling…

If if add mainWindow.getContent().setSizeFull(); i get the footer to be at the bottom all the time… but the browser will not have a scroll bar when the contents are more…
If i remove the setSizeFull() line, i get the scroll bar, but the footer will come up when the content on the page is less…

What am i missing here…

Here is the code for that…

	// Create the main window.
	Window mainWindow = new Window("Test");


	// Add the header component.
        VerticalLayout headerPanel = new VerticalLayout();
	headerPanel.setHeight("110px");
	mainWindow.getContent().addComponent(headerPanel);
	((VerticalLayout)mainWindow.getContent()).setComponentAlignment(headerPanel, Alignment.TOP_CENTER);

	
	// Add a horizontal layout for the body part.
	HorizontalLayout body = new HorizontalLayout();
            body.setWidth("990px");
	mainWindow.getContent().addComponent(body);
	((VerticalLayout)mainWindow.getContent()).setComponentAlignment(body, Alignment.TOP_CENTER);
	
	//add the footer
	footer.addStyleName("footer");
	footer.setHeight("75px");
	mainWindow.getContent().addComponent(footer);
	((VerticalLayout)mainWindow.getContent()).setComponentAlignment(footer, Alignment.BOTTOM_CENTER);
	
	setMainWindow(mainWindow);

Thanks in advance

Hari

I think easiest would be to wrap the middle part to a Panel.