Bootstrap-Vue：使元素填充剩余空间

Question

我在一个Bootstrap-Vue应用程序中有以下层次结构：

<b-navbar.../>

<b-container >
    <b-row align-v="center" style="min-height:100vh">
      <b-col style="align-items:center">
            <h1>404 Error</h1>
            <p>The page you have requested does not exist.</p>
      </b-col>
    </b-row>
</b-container>

<b-navbar .../>元素没有固定的高度，而是根据其内部元素进行缩放。

有没有办法使容器的内容填充剩余的视口，而不需要手动计算<b-navbar .../>的高度，以便404文本始终位于剩余空间的中央？ 目前，当我展开导航栏时，404文本将向下移动并超过视口的下沿。

- Markus Appel

Answer 1

这是你想要的结果吗？

html,
body,
.wrapper {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

<div class="wrapper">
  <b-navbar>NAVBAR</b-navbar>

  <b-container class="container">
      <b-row align-v="center">
        <b-col>
          <h1>404 Error</h1>
          <p>The page you have requested does not exist.</p>
        </b-col>
      </b-row>
  </b-container>
</div>

- Emanuel Saramago