VLayout - as header, content and footer

Hello

Im trying to build a web skeleton as Header, Content and Footer. And it look very weird, and I don know were is the problem. I’ve added a css “border” to show how it look like in webbrowser. It builds 3 v-slots with 33.3333% height, but I need Header to be 40 px, Footer also 40px, and Content rest.

Please Help me : D

This is my code.


        VerticalLayout mainVerticalLayout = new VerticalLayout();
		mainVerticalLayout.setSizeFull();
		mainVerticalLayout.setSpacing(false);
		mainVerticalLayout.addStyleName("border");

		setContent(mainVerticalLayout);
		getContent().setSizeFull();
		
	

		MenuBar menuBar = new MenuBar();
		menuBar.setWidth(100, Unit.PERCENTAGE);
		
		menuBar.addStyleName("border");
		
		MenuItem fileItem = menuBar.addItem("File", null);
		MenuItem editItem = menuBar.addItem("Edit", null);
		MenuItem viewItem = menuBar.addItem("View", null);
		MenuItem toolsItem = menuBar.addItem("Tools", null);

		
		
		HorizontalLayout content = new HorizontalLayout();
		content.setSizeFull();
		content.addComponent(new Label("Content"));
		content.addStyleName("border");
		
		
		HorizontalLayout footer = new HorizontalLayout();
		footer.setHeight("40px");
		footer.setWidth(100, Unit.PERCENTAGE);
		footer.addComponent(new Label("Footer"));
		footer.addStyleName("border");

		
		mainVerticalLayout.addComponent(menuBar);
		mainVerticalLayout.addComponent(content);
		mainVerticalLayout.addComponent(footer);

12941.png

Anserw is : add at the end this line:

mainVerticalLayout.setExpandRatio(content, 1);