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

x8goxv8g 于 2023-11-15 发布在 Bootstrap

关注(0)|答案(1)|浏览(162)

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/47691281/bootstrap-vue-make-element-fill-remaining-space

1条答案

按热度按时间

ljsrvy3e1#

这就是你想要的结果吗？

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

个字符

赞(0）回复(0）举报 2023-11-15

我来回答

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

1条答案

相关问题

热门标签

最新问答