我正在维护的 Vaadin 应用程序的基本视觉结构由一个居中的工作区组成,该工作区主要由一个 TabSheet 实现的菜单组成。内部工作区具有固定宽度(至少目前是这样)。
我想要实现的是:
- 工作区应该伸展到视口的底部,但它在垂直方向上不应小于 400 像素。
- 调整视口大小时,工作区应适应(水平位置和垂直大小)。
- 如果视口比工作区小,在高度或宽度上,滚动条应该出现在视口上(即不在工作区上)
- 在 iOS 或 Android 设备上,地址栏应该会消失。关于这一点的说明:我注意到,与“普通”网站不同,具有计算高度的 Vaadin 应用程序似乎急切地缩小尺寸,因此移动设备上的浏览器认为没有必要隐藏位置栏以获得更多空间。
这是我的一个尝试:
public class VaadinApplicationImpl1 extends Application {
private static final long serialVersionUID = 1L;
@Override
public void init() {
setTheme("sample");
setMainWindow(new Window() {{
setCaption("Vaadin-Layouting Sample");
setContent(
new CssLayout() {{
addStyleName("workareacontainer");
addComponent(
new TabSheet() {{
addTab(
new VerticalLayout() {{
setSizeFull();
setSpacing(true);
Label l = new Label("Workarea");
addComponent(l);
setExpandRatio(l, 1.0f);
addComponent(
new HorizontalLayout() {{
setSpacing(true);
addComponent(new Button("Button 1"));
addComponent(new Button("Button 2"));
}}
);
}},
"First"
);
}}
);
}}
);
}});
}
}
在哪里
.workareacontainer {
min-height: 400px;
height: 100%;
}
.workareacontainer > div {
position: relative;
height: 100%;
width: 800px;
min-width: 800px;
margin: 0 auto;
background-color: red;
}
.workareacontainer > div > div {
position:absolute;
top:5px;
bottom:5px;
left:5px;
right:5px;
background-color: green;
}
结果是一个标签页按我想要的方式拉伸和居中,但在调整浏览器大小时不会调整大小。这是 CssLayout 的限制吗?能克服吗?
此外,我只会得到垂直滚动条,而不是水平滚动条。知道如何解决吗?
假设从 Panel 和 setSizeUndefined() 的内部布局开始时,您可以获得浏览器级别的滚动条。不过,这似乎只有在没有 100% 拉伸要求的情况下才有效。
抱歉,如果这是重复的,我只是无法从其他问题中找到一个好的解决方案。
任何建议都会很棒!