在垂直布局中填充可用 space

Question

在我的 vaadin 项目中，我有一个垂直布局（高度为 100%），里面还有另外两个垂直布局。第一个具有固定高度，而第二个应填充浏览器剩余的 space-window。它将比剩余的 space 具有更大的高度，并且具有 overflow-y: scroll css 属性。我用方法 setExpandRatio 尝试了这个但没有用（高度通常比剩余的 space 高）。我可以只用 vaadin 实现这个，还是我必须为此使用 javascript？

AbstractOrderedLayout root = new VerticalLayout();
root.setHeight(100, Unit.PERCENTAGE);
AbstractOrderedLayout child1 = new VerticalLayout();   
AbstractOrderedLayout child2 = new VerticalLayout();  

child1.setHeight(200, Unit.PIXELS);
root.addComponent(child1);

child2.setHeightUndefined(); 
root.addComponent(child2); // child2 will be filled with items. if its higher than the remaining space, it should be scrollable (overflow-y: auto)
// root.setExpandRatio(child2, 1F);

Answer 1

因此，如果我没理解错的话，您希望第一个区域具有固定高度，第二个区域可能大于剩余高度，因此需要滚动。

如果是这样，布局如下

垂直布局"Main" (sizeFull)
- VerticalLayout“1”（宽度 100%，高度固定）：用固定高度的内容填充此布局
- 面板（sizeFull + VerticalLayoutMain 上的 setExpandRation 为 1）
  - VerticalLayout“2”（宽度 100%，高度未定义）：用您的其他内容填充此布局

此致

在垂直布局中填充可用 space

filling available space inside a vertical layout

layout

vaadin

vaadin7