How to set a full height background color in bulma column?

Question

I'm struggling to get bulma to fill my entire column height with a background color. Instead it appears to apply the background color only to the elements within the column div.

I would like the purple background of the left column to fill the full height of the page.

Here is my HTML...

<template>
  <div class="page">
    <div class="columns is-gapless is-desktop is-vcentered">
      <div class="column has-background-primary">
        <h1 class="title is-1 has-text-white">SEPA { Logging }</h1>
      </div>
      <div class="column">
        <section class="login-form">
          <b-field label="Username" type="is-success" message="This username is available">
            <b-input value="johnsilver" maxlength="30"></b-input>
          </b-field>
          <b-field label="Password">
            <b-input type="password" value="iwantmytreasure" password-reveal></b-input>
          </b-field>
          <b-field>
            <button class="button is-primary">Login</button>
          </b-field>
        </section>
      </div>
    </div>
  </div>
</template>

This is the bit that I hoped would fill the full background..

<div class="column has-background-primary">
    <h1 class="title is-1 has-text-white">SEPA { Logging }</h1>
</div>

and my css...

.columns {
  display: flex;
  height: 100vh;
}

.login-form {
  padding-left: 50px;
  padding-right: 50px;
}

Answer 1

The .is-vcentered class is vertically aligning the content in the columns, but it is also making those divs take only the height needed for that content, hence the background is not taking the full height.

Remove the .is-vcentered class and use some additional CSS to center the content inside those columns.

.columns {
  display: flex;
  height: 100vh;
}

.login-form {
  padding-left: 50px;
  padding-right: 50px;
}


/* Use something like this to center the content inside the columns
   Suggest using better classes to select them based on your project

   .column elements have .is-flex added to make them flex
*/

.title, .login-form {
  margin: auto 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
  <div class="page">
    <div class="columns is-gapless is-desktop">
      <div class="column is-flex has-background-primary">
        <h1 class="title is-1 has-text-white">SEPA { Logging }</h1>
      </div>
      <div class="column is-flex">
        <section class="login-form">
          <label label="Username" type="is-success" message="This username is available">
            <input value="johnsilver" maxlength="30"></b-input>
          </label>
          <label label="Password">
            <input type="password" value="iwantmytreasure" password-reveal></input>
          </label>
          <b-field>
            <button class="button is-primary">Login</button>
          </b-field>
        </section>
      </div>
    </div>
  </div>