css - 100vh flex 元素不是全高

Question

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

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 类，所以我试了一下，它起作用了。那摆脱了差距。谢谢大家。