css v-verticallayout，如何設置高度

我正在使用登錄表單（在vaadin中）。我使用CSS樣式來獲取背景顏色。問題是它沒有顯示100％的頁面效果。css v-verticallayout，如何設置高度

我沒有對鉻「考察」，發現「V-VerticalLayout的V型佈局的V垂直V型插件V-具有寬度」具有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%; 
    } 
}

來源

2016-07-05 user1631306

您是否對HTML文件有直接訪問權限？ –

不，我正在使用vaadin。所以我使用CSS類將樣式設置爲不同的組件。 – user1631306

好吧，所以你不能添加任何類到HTML元素 –

根據您所提供的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%; 
}

來源

2016-07-05 19:11:14

原則上你是對的，但你不知道你添加的類的高度是用在別的地方，你不需要100％的高度 –

我確實嘗試過。它解決了我的問題，但它將整個登錄框推到頁面上。我檢查了CSS，看到它創建了另一個屬性，但沒有添加任何東西給element.style。我需要一些可以添加到element.style的東西。 – user1631306

所有'element.style'正在添加到特定元素。在CSS中，如果你想定位那個元素，那麼你必須對你的選擇器更具體。像'div.v-verticallayout.v-layout.v-vertical.v-widget.v-has-width'這樣的東西只會選擇具有該類組合的元素。 –

css v-verticallayout，如何設置高度

回答

相關問題