100vh flex-item не в полный рост

Question

Я пытаюсь разделить область просмотра на два равных элемента в полный рост. Я использую 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, поэтому я попробовал это, и это работает. Это избавило от разрыва. Спасибо всем.

Answer 2

Можете ли вы добавить тело, высота HTML 100%, как показано ниже:

html,body {
  height: 100%;
}

Answer 3

добавить следующий стиль

.columns { margin:0 }