Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
VerticalLayout with half fixed size
Hello I'm Tiago,
I'm trying to design a page like this:
VerticalLayout: Height:100% and Width:100%
- Header: Height:200px and Width:100%
- Content: Height:X and Width:100%
- Footer: Height:50px and Width:100%
X = reaming of Height of the page
Is this possible?
I've tried with ratios, and it works on a fixed resolution. But if I open in a different resolution the Header and Footer will be in different heights.
Best Regards,
Tiago Freitas
This should be fairly straightforward:
verticalLayout.setSizeFull();
header.setWidth("100%");
header.setHeight("200px");
verticalLayout.addComponent(header);
content.setSizeFull();
verticalLayout.addComponent(content);
footer.setWidth("100%");
footer.setHeight("50px");
verticalLayout.addComponent(footer);
verticalLayout.setExpandRatio(content, 1f);
(If not obvious: I removed everything unnecessary for the explanation like the instantiation of the layouts)
Haven't tested it and i wrote it without an IDE but i don't see why it shouldn't work.
Thank you a lot!
It works!
So the ExpandRatio is saying that all the free space (1f) is taken by 'content' right?
Once again thanks a lot.
Tiago
Expand Ratio tells the Client side layouter how to distribute the child components in a layout.
The default expand ratio is 0 so if not set, all components will be distributed equally in the layout. When you set one component to something bigger than 0 like 1f (f just to clearify that it's a float value. might not be needed. I just got used to writing it like this) it will get all space that is left. All others will take 0 of it and will only take what they need. If a 100% height component has a zero Ratio while another doesn't it will shrink down to 0px as it "needs" no height.
If you have multiple full-height components you can use relative Expand ratio so something like:
setExpandRatio(biggerComp, 3);
setExpandRatio(smallerComp, 1);
so the biggerComp will be 3 times as big as the smallerComp
Tiago Freitas: Thank you a lot!
It works!
So the ExpandRatio is saying that all the free space (1f) is taken by 'content' right?
Once again thanks a lot.
Tiago