如何构建保留最小尺寸，在可能的情况下进行拉伸，显示浏览器级别滚动条的Vaadin设计

gnomie 发表于 Dev

地精

我维护的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％拉伸要求的情况下有效。

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

任何建议都很好！

伊瓜罗

据我了解您的问题，您希望工作区动态地集中在浏览器视图尺寸的百分之一处，不是吗？我设法重现了您的示例，并解决了最小尺寸的滚动条和将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;
}