如何使列的高度达到100％

Question

我使用materialcss并使用它的caousel。在旋转木马内部我添加了一行和两列具有不同内容。但问题是列的高度不满。看看这个截图

绿色和蓝色列应该是其父级div（红色）的全高。

我申请了height:100%，但它仍然没有影响。任何人都可以帮助我吗？

这是调整大小时的输出

我已经添加了css和html请帮帮我

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试height:100vh;而不是height:100%;

Answer 2

您还可以通过将其添加到样式表中来解决此问题：

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

它取代了materialize css中的默认1px最小高度。