填充垂直布局内的可用空间答案

【问题标题】：filling available space inside a vertical layout填充垂直布局内的可用空间
【发布时间】：2015-01-22 01:05:35
【问题描述】：

在我的 vaadin 项目中，我有一个垂直布局（高度为 100%），内部还有另外两个垂直布局。第一个具有固定的高度，而第二个应该填充浏览器窗口的剩余空间。它将具有比剩余空间更大的高度并具有溢出-y：滚动 css 属性。我用 setExpandRatio 方法尝试过，但没有奏效（高度通常大于剩余空间）。我可以仅使用 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);

【问题讨论】：

“没有工作”可能意味着任何事情。想详细说明一下吗？对于理智的滚动行为，我宁愿使用`Panel（100％高度和1 expandRatio）并将布局放置在其中。
当我向其添加内容时，第二个孩子变得比剩余空间更长。它没有像我预期的那样被剪切，也没有出现滚动条。整个项目比较复杂，我需要VerticalLayout。我只是删除了所有不必要的内容，以描述我的问题。
那么同样适用于 stackoverflow.com/questions/27940668/… 。使用面板。代码改动大概有四行。
只需将上面示例中的 child2 放入面板中，然后将面板而不是 child2 添加到根目录。我真的无法想象一个用户界面，这将是一个如此引人注目的地方......
哇，真的有效。我以前不敢相信；-) 请将此信息写为答案，以便我将您的答案标记为正确答案。

标签： layout vaadin vaadin7

【解决方案1】：

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

如果是这样，这是布局

VerticalLayout"Main" (sizeFull)
- VerticalLayout"1"（宽度 100%，高度固定）：用您的固定高度内容填充此布局
- 面板（在 VerticalLayoutMain 上的 sizeFull + setExpandRation 为 1）
  - VerticalLayout"2" (width100%, heightUndefined)：用你的其他内容填充这个布局

问候

【讨论】：