My goal is to create two equal divs in the viewport that span the full height. I am utilizing Bulma for this task, however, I have a suspicion that the issue may not be related to it.
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;
}
The code snippet nearly achieves the desired outcome, although there remains a small strip of white space at the bottom:
https://i.sstatic.net/mkMA8.png
For further reference, you can view the Codepen.