Question

我正在使用登录表单（在vaadin中）。我使用CSS样式来获取背景颜色。问题是它没有向100％的页面显示效果。

我做过＆＃34;检查＆＃34;在chrome上发现＆＃34; v-verticallayout v-layout v-vertical v-widget v-has-width＆＃34;在element.style没有高度。如果我将element.style的高度添加到100％（在chrome的检查工具上），效果可以看到整页。我该如何在CSS中解决这个问题

以下是我的CSS

.dmr{

    @include valo;

    background-image: url(sciome-vector-logo.png); 
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 120px 80px;

    /* Applies to every page */
    html {
        height:100%;
        margin-bottom:1px ;
        color:black;
    }

    body {
        overflow-y: scroll;
    }

    .v-slot {
        overflow: hidden;
        height:100%;
    }



    .entire_div {
        text-align: center;
        height: 100%;
    }   


    .v-verticallayout-entire_content_div {
        text-align: center;
        height:100%;
        width:100%;
    }

    .div{
        height: 100%;
    }

    .entire_content_div {
        margin: auto;
        height: 100%;
    }


    /* Main view properties */

    .v-slot-page_content_div {
        height: calc( 100% - 55px );
        overflow-y: auto;
    }

    .page_content_div {
        text-align: center;
        min-height: 80vh;
        height: 100%;
    }

    .v-slot-login {
        height: 100%;
    }
}

Answer 1

根据您提供的CSS，这些选择器都没有选择您在浏览器中height: 100%;添加element.style的元素。这样的事情可能会选择它：

.v-verticallayout { 
     height: 100%;
}

我还注意到你的CSS中有一个.div选择器，但我认为你的意思是选择器div，而不是一个名为div的类。

编辑：更改了建议的选择器更具体，因此它不会覆盖与OP遇到的相同类的其他元素。

这可以解决许多问题，直到你得到足够的具体信息，它不会影响你的其他元素。

div.v-verticallayout.v-layout.v-vertical.v-widget.v-has-width {
 height: 100%;
}

css v-verticallayout，如何设置高度

1 个答案: