Html 如何在bulma列中设置全高背景色？

我正努力让bulma用背景色填充我整个专栏的高度。相反，它似乎只将背景色应用于

列中的元素


我想左边一栏的紫色背景填充整个页面的高度

这是我的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>

.is vcenter
类垂直对齐列中的内容，但它也使这些div仅占据该内容所需的高度，因此背景不占据整个高度

删除
.is vcenter
类，并使用一些额外的CSS将内容集中在这些列中


.columns{
显示器：flex；
高度：100vh；
}
.登入表格{
左侧填充：50px；
右边填充：50px；
}
/*使用类似的方法将内容放在列的中心
建议根据您的项目使用更好的类来选择它们
.column元素具有。是否添加了flex以使其具有灵活性
*/
.title、.login表单{
保证金：自动0；
}

SEPA{Logging}
登录

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

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

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