布局不可滚动答案

【问题标题】：Layout not scrollable布局不可滚动
【发布时间】：2018-05-19 14:49:47
【问题描述】：

我正在使用 Vaadin / Spring boot 设计应用程序，并且我已设法使用位于 styles.scss 文件中的以下 css 设置我的应用程序的背景（根据 Vaadin 在 myTheme 中）：

.backgroundImage{

      background: url("img/background4.png") ;
    min-height: 100%;
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    }

它按照罐头上所说的那样设置背景图像。我的问题是这使页面不再能够滚动，这是我的一个表单的图片：。

有人知道我在哪里出错了吗？另外我真的很想将此背景设置为我的应用程序的默认背景。谁能建议如何做到这一点？

我将 CSS 更改为：

  .backgroundImage{

    background: url("img/background4.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

按照 Mo 的指示，但我现在得到了 37 像素的填充？类构造函数如下所示：

 public AddEmployeeView() {
        GridLayout grid = new GridLayout(3,2);
        setSizeFull();
        setStyleName("backgroundImage");
        setMargin(false);
        setDefaultComponentAlignment(MIDDLE_CENTER);
        addComponent(aUI.getHeader());
        header.addStyleName("h2");
        addComponent(header);
        Panel topleft = topLeftAndBottom();
        Panel topright = topRight();
        grid.setSizeUndefined();
        grid.addComponent(topleft,0,0,0,1);
        grid.addComponent(topright,1,0,1,1);
        addComponents(grid,generateButtons());

    }

【问题讨论】：

缺少什么 padding-bottom ？
周围有 37 像素的填充？
你在哪里应用了背景img？
添加了Java构造函数，该类扩展了VerticalLayout并实现了View
你想让背景img覆盖所有的应用程序吗？还是只是那个组件？

标签： css sass vaadin

【解决方案1】：

使用这个css：

.backgroundImage{

    background: url("img/background4.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

编辑

如果您希望背景图像覆盖所有应用程序，只需将上述样式应用于body 或html 并将该样式放入Global styles

全局样式是在文档范围内定义的样式。全局样式可以定位文档正文和内部的任何常规 DOM 内容，包括应用程序视图

【讨论】：

用您的解决方案在更改时出现的问题编辑了问题。