Java 如何构造保持最小尺寸、尽可能拉伸、显示浏览器级滚动条的Vaadin设计

我维护的Vaadin应用程序的基本视觉结构由一个中心工作区组成，该工作区主要由一个TabSheet实现的菜单组成。内部工作区具有固定宽度（至少当前是这样）

我努力实现的目标是：

工作区应该延伸到视口的底部，但在垂直方向上不应该小于400px

调整视口大小时，工作区应适应（水平位置和垂直大小）

如果视口在高度或宽度上小于工作区，则应在视口上显示滚动条（即不在工作区上）

在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"
              );
            }}
          );
        }}
      );
    }});
  }
}

在哪里

结果是一个标签页按我所希望的那样拉伸和居中，但在调整浏览器大小时不调整大小。这是CssLayout的限制吗？这能克服吗

此外，我只会得到垂直滚动条，而不会得到水平滚动条。知道怎么解决吗

假设您可以从面板和setSizeUndefine（）的内部布局开始，获得浏览器级别的滚动条。不过，这似乎只有在没有100%拉伸要求的情况下才起作用

对不起，如果这是重复的，我只是无法从其他问题中找出一个好的解决方案

任何建议都很好

我理解您的问题，您希望工作区以浏览器视图尺寸的百分比动态居中，不是吗？我设法复制了您的示例，并解决了最小大小的滚动条和动态居中问题，将您的css调整为以下内容：

---

更新 通过以下修改，

TabSheet

调整大小以适应容器div

公共类VAADINApplicationImpl1应用程序扩展应用程序{
私有静态最终长serialVersionUID=1L；
@凌驾
公共void init（）{
设定主题（“样本”）；
setMainWindow（新窗口（）{{
setCaption（“瓦丁布局样本”）；
setContent（新的CssLayout（）{{
addStyleName（“工作区容器”）；
设置大小（）；
addComponent（新选项卡页（）{{
//如果将宽度设置为“100%”，选项卡页将溢出
//绿色和红色的div。将其设置为100%，然后添加
//如果你不在乎的话，对CSS来说“overflow-x:hidden”
//右边距
设定宽度（“99%”）；
addTab（新的垂直布局（）{{
设置间隔（真）；
标签l=新标签（“工作区”）；
添加组分（l）；
addComponent（新水平布局（）{{
设置间隔（真）；
添加组件（新按钮（“按钮1”））；
添加组件（新按钮（“按钮2”））；
}
});
}
}“第一”）；
}
});
}
});
}
});
}
}

同时将CSS文件更改为以下内容：

.workareacontainer{
最小高度：400px；
身高：100%；
/* 
向“workareacontainer”容器div添加最小宽度，
当调整大小事件发生时，浏览器将使用此值
用于最小宽度计算（与高度一样）
*/
最小宽度：800px；
}
.workareacontainer>div{
身高：100%；
/* 
在右侧添加额外的填充
所以绿色的div显示包含在这个
*/
填充物：5px；
右侧填充：30px；
/* 
更换这条线
宽度：800px；
与：
*/
宽度：90%；
/* 
在这里，您可以使工作区适应浏览器的宽度大小，
在两个利润率上留下5%的小差距，这将使您的
工作区看起来“居中”
*/
最小宽度：800px；
保证金：0自动；
背景色：红色；
}
.工作区容器>分区>分区{
/* 
移除绝对定位，在右侧添加额外的填充
因此，选项卡表显示了包含在div中的内容
*/
填充物：5px；
右边填充：20px；
身高：100%；
宽度：100%；
背景颜色：绿色；
}

使用Google的Chromium 30.0.1599.114和Firefox 25.0.1进行测试（使用时建议测试浏览器兼容性）

---

非常感谢您在这方面花费时间。考虑到观点的数量与评论/答案的数量，这一定比我希望的要难。我试过你的建议，但这不是我真正想要的。主要问题是，在调整尺寸（#2）的过程中，Vaadin零件不适应，同时遵守其他约束条件。也就是说，如果它总是完全填满WorkArea容器（也在调整大小以及它是否完全可见之后），这可能会解决大部分问题。我很高兴地承认CSSLayout不是正确的选择。所以，除了滚动条和动态中心外，您还希望

选项卡

调整到容器div空间？还是希望

选项卡及其内容按比例显示
.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;
}