更新

Question

我维护的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"
              );
            }}
          );
        }}
      );
    }});
  }
}

，其中

.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％ - 拉伸要求的情况下，这似乎才有效。

很抱歉，如果这是重复的，我只是无法从其他问题中找到一个好的解决方案。

任何建议都会很棒！

Answer 1

根据我的理解你的问题，你希望工作区以浏览器视图尺寸的百分比动态居中，不是吗？我设法重现你的样本并解决了最小尺寸滚动条和动态定心问题，将你的css调整为以下内容：

<小时/>

更新

通过以下修改，TabSheet会调整大小以适应容器div。

public class Vaadinapplicationimpl1Application 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");
                        setSizeFull();
                        addComponent(new TabSheet() {{
                                // If you set the width to "100%" the TabSheet will overflows the
                                // the green and red divs. Set this to 100% and add 
                                // "overflow-x:hidden" to the CSS if you don't care about
                                // the right margin  
                                setWidth("99%");

                                addTab(new VerticalLayout() {{
                                        setSpacing(true);
                                        Label l = new Label("Workarea");
                                        addComponent(l);
                                        addComponent(new HorizontalLayout() {{
                                                setSpacing(true);
                                                addComponent(new Button("Button 1"));
                                                addComponent(new Button("Button 2"));
                                            }
                                        });
                                    }
                                }, "First");
                            }
                        });
                    }
                });
            }
        });
    }
}

还要将CSS文件更改为以下内容：

.workareacontainer {
    min-height: 400px;
    height: 100%;

    /* 
    Add a minimun width to the "workareacontainer" container div, 
    the browser will use this value when the resize event takes in
    for the minimun width calculation (as it does for the height) 
    */
    min-width: 800px;
}

.workareacontainer > div {
    height: 100%;

    /* 
    Add extra padding to the right
    so the green div shows contained inside this
    */
    padding: 5px;        
    padding-right: 30px;

    /* 
    Replace this line 
       width: 800px;
    with: 
    */
       width: 90%; 
    /* 
    Here you make the workarea adaptable to the browser's width size, 
    leaving a small gap of 5% at both margins that will make your 
    workarea look "centered" 
    */

    min-width: 800px;
    margin: 0 auto;
    background-color: red;
}

.workareacontainer > div > div {
    /* 
    Remove the absolute positioning, add extra padding to the right
    so the TabSheet shows contained inside the div
    */
      padding: 5px;
    padding-right: 20px;

    height:100%;
    width:100%;

    background-color: green;
}

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

enter image description here

如何构建一个Vaadin设计，尽可能保持最小尺寸，伸展，显示浏览器级别的滚动条

1 个答案:

更新