时间戳

首页 > 解决方案 > 100vh 弹性项目不是全高

css - 100vh 弹性项目不是全高

问题描述

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

标签： cssflexboxbulma

解决方案

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

我看到了这门课is-gapless，所以我试了一下，它奏效了。这消除了差距。谢谢大家。

推荐阅读