如何在 bulma 列中设置全高背景颜色？答案

【问题标题】：How to set a full height background color in bulma column?如何在 bulma 列中设置全高背景颜色？
【发布时间】：2019-05-11 08:37:19
【问题描述】：

我正在努力让 bulma 用背景颜色填充我的整个列高。相反，它似乎只将背景颜色应用于column div 中的元素。

我希望左栏的紫色背景填满页面的整个高度。

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

这是我希望填满整个背景的那一点..

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

还有我的 CSS...

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

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

【问题讨论】：

标签： html css bulma

【解决方案1】：

.is-vcentered 类垂直对齐列中的内容，但它也使这些 div 仅占用该内容所需的高度，因此背景没有占用整个高度。

删除 .is-vcentered 类并使用一些额外的 CSS 使这些列内的内容居中。

.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>

【讨论】：