Given the following test view, the header and footers do not stay at their allotted sizes. This is because flex-shrink is 1 by default. Setting flex-shrink manually to 0 will lead to expected behaviour.
@Route("test")
public class ApplicationLayout extends VerticalLayout {
private final HorizontalLayout layout;
public ApplicationLayout() {
final Label header = new Label("This is the header. My height is 150 pixels");
header.setWidth("100%");
header.setClassName("header");
header.setHeight("150px");
header.getStyle().set("backgroundColor", "red");
layout = new HorizontalLayout();
layout.setSizeFull();
createLabelLayout();
final Label footer = new Label("This is the footer area. My height is 100 pixels");
footer.setWidth("100%");
footer.setClassName("footer");
footer.setHeight("100px");
footer.getStyle().set("backgroundColor", "yellow");
add(header, layout, footer);
setFlexGrow(1, layout);
setSizeFull();
}
private void createLabelLayout() {
final Div navigation = new Div();
navigation.setClassName("navigation");
navigation.setHeight("100%");
navigation.getStyle().set("width", "25%");
navigation.setText("This is the navigation area. My width is 25% of the window.");
navigation.getStyle().set("backgroundColor", "blue");
final Div content = new Div();
content.getStyle().set("width", "75%");
content.getStyle().set("display", "flex");
content.setText("This is the content area");
content.setClassName("content");
content.setHeight("100%");
content.getStyle().set("backgroundColor", "green");
layout.add(navigation, content);
}
@Override
protected void onAttach(AttachEvent attachEvent) {
super.onAttach(attachEvent);
getUI().ifPresent(ui -> ui.getPage().executeJavaScript("document.getElementsByTagName('html')[0].style.height = '100%'"));
getUI().ifPresent(ui -> ui.getPage().executeJavaScript("document.body.style.height = '100%'"));
}
}