Блог

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

Благодаря пользователю 04FS, как только я узнал, что это проблема Bluma, я пошел и прочитал там документы.

Я видел класс is-gapless , поэтому я попробовал это, и это работает. Это избавило от разрыва. Спасибо всем.

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

 .columns { margin:0 }
  

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

 html,body {
  height: 100%;
}