css - 将 Bootstrap 容器包裹在单列中，100% 高度

Question

我正在使用 Bootstrap .container 类将内容置于屏幕中心并将其宽度固定为适合视口(viewport)的宽度。很好，但是我现在想将该容器包装在一个高度为 100% 的居中列中。我希望高度至少为视口(viewport)的 100%。当内容未固定在单个屏幕上时，它应该展开。

我看过将 html 和 body 元素的高度设置为至少屏幕高度的一般解决方案，但这些似乎不起作用在 Bootstrap 中。我怀疑这与将 box-sizing 设置为 border-box 有关。

这是 html 的示例:

<div class='my-col'>
  <div class='container'>
    <p>My content goes here</p>
  </div>
</div

Answer 1

使用最小高度:100vh。

vh 是视口(viewport)单位:1 vh 等于显示器高度的 1%。