在Semantic-UI 2.0中创建100vh容器

Question

我有一个容器，我想垂直拉伸到100vh。

<div class="ui grid container">
  <div class="sixteen wide column banner">
    <h1>
      Guardian Family Martial Arts
    </h1>
  </div>
</div>

这是我的LESS CSS：

.banner {
  height: 100vh;
  text-align: center;
  h1 {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

我遇到的问题是，尽管横幅列试图填充100％的视口高度，但由于父容器<div class="ui grid container">上的负边距，它会略微偏离页面底部。

在我的检查员中，我发现： margin: -1rem;

当我禁用该样式时，它解决了我的问题。

现在，我的问题是：是否有一个＆＃34;干净的方式/特殊课程＆＃34;使用Semantic-UI 2.0禁用容器上的负边距？或者我需要为它创建一个覆盖？

这是一个截图（蓝色区域显示在100vh容器下面的div）：

Answer 1

对我来说唯一的解决方案是：

    .unpadded {
        padding:0 !important;
    }

Answer 2

正如本answer所述，应该使用“主网格”中的padded类。另一种方法是将container类应用于主ui grid组件。