100vh flex-item不是全高

Question

我正在尝试将视口拆分为两个相等的全高div。我正在使用布尔玛，但我怀疑我的问题与此无关。

HTML

<div class="columns">
  <div class="column is-flex is-flex-centered is-blue is-full-height">
    <h1>Blue</h1>
  </div>

  <div class="column is-flex is-flex-centered is-red is-full-height">
    <h1>Red</h1>
  </div>
</div>

CSS

.is-flex {
  display: flex;
}

.is-flex-centered {
  justify-content: center;
  align-items: center;
}

.is-blue {
  background-color: blue;
  color: white;
}

.is-red {
  background-color: red;
  color: white;
}

.is-full-height {
  height: 100vh;
}

html,body {
  height: 100vh;
}

这几乎可以用，但是底部还有一点空白：

这里也是Codepen。

Answer 1

感谢用户04FS，一旦我知道这是Bluma问题，我就去那里阅读文档。

我看到了is-gapless类，所以我尝试了一下，它可以工作。那消除了差距。谢谢大家。

Answer 2

添加以下样式

.columns { margin:0 }

Answer 3

您能否将Body，HTML高度添加为100％，如下所示：

html,body {
  height: 100%;
}