CssLayout height Calculation Problem

Hi all,
i have a CssLayout containing another CssLayout (containing a menu) and i need to fill the remaining space with a table.
I’v tryed this:

	public void init() {
		Window mainWindow = new Window("Layouttest Application");
		{
			CssLayout container = new CssLayout();
			{
				CssLayout menu = new CssLayout();
				{
					Button b1 = new Button("Bottone 1");
					b1.setStyleName(BaseTheme.BUTTON_LINK);
					menu.addComponent(b1);
					Button b2 = new Button("Bottone 2");
					b2.setStyleName(BaseTheme.BUTTON_LINK);
					menu.addComponent(b2);
					Button b3 = new Button("Bottone 3");
					b3.setStyleName(BaseTheme.BUTTON_LINK);
					menu.addComponent(b3);
				}
				menu.setWidth("100%");
				menu.setHeight(100.0f, Sizeable.UNITS_PIXELS);
				container.addComponent(menu);
				CssLayout page = new CssLayout();
				{
					Table t = new Table();
					t.setSizeFull();
					t.setHeight("100%");
					t.addContainerProperty("id", Integer.class, 1);
					t.addContainerProperty("nome", String.class, "aaa");
					t.addContainerProperty("cognome", String.class, "bbb");
					
					for(int i = 0; i < 200; i++){
						t.addItem(i);
					}
					page.addComponent(t);
				}
				page.setHeight("100%");
				page.setSizeFull();
				container.addComponent(page);
			}
			container.setSizeFull();
			container.setHeight("100%");
			mainWindow.setContent(container);		
		}
		setMainWindow(mainWindow);
	}

but page.setHeight(“100%”); seem to calculate the final height without taking count of the menu height (and the table go out of the bottom of the page)
It may seem correct since i say setHeight(“100%”), but i need 100% of the remaining space, not the total space.

How i can fix this ?

You need to use a VerticalLayout, since CssLayout only calculates percentages from the total size of the layout. You might be able to work around that using vanilla CSS, using absolute positioning and setting the top and bottom offset for the “page” component.

Something like this (add style name “page” to that layout)

.v-csslayout {
  position: relative;
}

.v-csslayout-page {
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto !important;
}

thanks for the answer,
but i I can not use absolute positioning because i don’t really know the height of the menu.

I’ve tryed with VerticalLayout but the page split in two equal pieces and the menu div is inside a fixed height div (wich height is half the window’s height)

I attach the image where the selected one is the div in question
12231.gif

VerticalLayout uses ratios to do it’s computation (see the book for more details)
try adding verticalLayout.setExpandRatio(page, 1.0f);

thanks, now it is perfect