100vh 弹性项目不是全高答案

【问题标题】：100vh flex-item is not full height100vh 弹性项目不是全高
【发布时间】：2019-04-08 07:35:58
【问题描述】：

我正在尝试将视口拆分为两个相等的全高 div。我正在使用 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。

【问题讨论】：

.columns { margin-top: -.75rem; } 来自 bulma CSS 是罪魁祸首……

标签： css flexbox bulma

【解决方案1】：

感谢用户 04FS，一旦我知道这是 Bluma 问题，我就去阅读那里的文档。

我看到了is-gapless 的课程，所以我尝试了一下，它成功了。这消除了差距。谢谢大家。

【讨论】：

【解决方案2】：

添加以下样式

.columns { margin:0 }

【讨论】：

【解决方案3】：

您能添加 Body 吗，HTML 高度 100%，如下所示：

html,body {
  height: 100%;
}

【讨论】：