如何使列的高度爲100％

我使用materialcss並使用它的控制檯。在旋轉木馬裏面，我添加了一行和兩列有不同的內容。但問題是列的高度不夠飽滿。看看這張截圖如何使列的高度爲100％

綠色和藍色列應全高爲其父DIV（紅色）之一的。我應用了height:100%但仍然沒有影響。誰能幫我嗎？

這是在調整大小時

我已經加入CSS和HTML請幫我

.full-height { 
 
    height: 100% !important; 
 
} 
 

 
.reach-content { 
 
    background-color: #00695c; 
 
} 
 

 
.center-horizontal { 
 
    text-align: center; 
 
} 
 

 
.center-vertical { 
 
    vertical-align: middle; 
 
} 
 

 
.border { 
 
    border: 1px solid #00695c; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script> 
 

 
<div class="carousel carousel-slider center" data-indicators="true"> 
 
    <div class="carousel-item red" href="#one!"> 
 
    <div class="row"> 
 
     <div class="col m8 blue full-height"> 
 
     <h2>First Panel First firstFirst First</h2> 
 
     </div> 
 
     <div class="col m4 reach-content white-text"> 
 
     <h1>20</h1> 
 
     <h5 class="white-text">Projects</h5> 
 
     <p class="white-text">Successfully completed and delivered</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="carousel-item amber white-text" href="#two!"> 
 
    <h2>Second Panel</h2> 
 
    <p class="white-text">This is your second panel</p> 
 
    </div> 
 
    <div class="carousel-item green white-text" href="#three!"> 
 
    <h2>Third Panel</h2> 
 
    <p class="white-text">This is your third panel</p> 
 
    </div> 
 
    <div class="carousel-item blue white-text" href="#four!"> 
 
    <h2>Fourth Panel</h2> 
 
    <p class="white-text">This is your fourth panel</p> 
 
    </div> 
 
</div>

來源

2017-08-01 Alen

輸出嘗試height:100vh;，而不是height:100%;

來源

2017-08-01 19:42:30

這是什麼vh？ – Alen

長度單位表示視口寬度高度（vh）的視口大小的1％。我從來沒有任何成功的百分比設置高度。另外，我無法渲染粘貼的代碼，因此我看不到您正在處理的內容，但我也懷疑您的DOM層次結構中較高的div需要「.full-height」適用於它。 –

你也可以通過添加到這個樣式表中解決這個問題：

.col{min-height: 1000px !important;}

它將替換Materialise的CSS默認1px的最低高度。

來源

2017-08-01 21:37:13 CaptainAmericaIRL

如何使列的高度爲100％

回答

相關問題