#css #flexbox #bulma
#css #flexbox #bulma
Вопрос:
Я пытаюсь разделить область просмотра на два равных раздела, которые имеют полную высоту. Я использую 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.
Комментарии:
1.
.columns { margin-top: -.75rem; }
из bulma CSS является виновником …
Ответ №1:
Благодаря пользователю 04FS, как только я узнал, что это проблема Bluma, я пошел и прочитал там документы.
Я видел класс is-gapless
, поэтому я попробовал это, и это работает. Это избавило от разрыва. Спасибо всем.
Ответ №2:
добавьте следующий стиль
.columns { margin:0 }
Ответ №3:
Не могли бы вы добавить тело, высоту HTML 100%, как показано ниже:
html,body {
height: 100%;
}