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 文本将移向并经过视口的下边缘。

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>