如何使列的高度为 100%答案

【问题标题】：How to make the height of a column 100%如何使列的高度为 100%
【发布时间】：2018-01-08 19:45:57
【问题描述】：

我使用 materialcss 并使用它的 caousel。在轮播中，我添加了一行和两列具有不同内容的内容。但问题是列的高度未满。看这个截图

绿色和蓝色列的高度应与其父 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>

【问题讨论】：

标签： html css material-design materialize

【解决方案1】：

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

【讨论】：

这是什么 vh？
长度单位表示视口宽度高度 (vh) 的视口大小的 1%。我从来没有成功地按百分比设定高度。另外，我无法呈现您粘贴的代码，所以我看不到您正在使用什么，但我也怀疑在您的 DOM 层次结构中较高的 div 上也需要应用“.full-height”它。

【解决方案2】：

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

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

它替换了具体化 css 中默认的 1px 最小高度。

【讨论】：