我如何使用 Bootstrap 5 为 100 以外的值设置相对于视口的高度？

Question

这是我在过去创建的一种 div 类型的尝试，但使用的自定义样式表具有最少的非 bootstrap css。它还没有完全实现，但我正在尝试将我写入 django 静态文件 CSS 的每个样式规则隐藏到 bootstrap class 中。我坚持基于视口的大小调整。

我发现这些文档之前的状态是这样的，内容符合您的预期：

I discover this wonderful little bit in Bootstrap 5

我将 class 设置为非常酷的“vh-100”，将 div 设置为占据视口的整个垂直高度。

但是等等，它匹配整个视口的高度，而不是导航栏和填充计算出后的剩余部分。虽然有道理。

太棒了！只需要稍微削掉一点，这样它就能真正适合实际的视口，我们就有了想要的最终状态。

查看 bootstrap 文档，您通常可以像我们在这里所做的那样指定 25%、50%、75% 或 100%。好吧，它没有谈论基于视口的大小调整，但它在很多 bootstrap 的东西中都有，所以我猜这里也是一样的。所以我试一试。 75% Viewport 应该正好可以给它留一点底部区域。

所以现在是“vh-50”或“vh-75”

好吧，很奇怪 - Viewport 必须是 100，否则它会回退到基于内容调整大小。在文档中看不到基于视口大小调整的任何其他值的其他示例，而且我无法在野外找到任何其他值。

以防万一，这里是 html div（django 应用程序中 jinja 内容块的一部分）

{% block content %}
  <div class="body-area bg-dark text-light my-5 vh-75">
    <div class="container">
      <div class="row">
        Hi
      </div>
    </div>
  </div>
{% endblock %}

这是我的 CSS。我确实已经尝试从我的 css 中删除所有高度实例，但没有任何效果。 html 和正文是通过基本模板应用的，您可以看到它的工作原理，因为背景渐变显示正确（否则它会在没有 body/html 样式的情况下平铺）。

.body-area {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  border: 10px solid #000000;
  border-radius: 15px;
}

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

虽然我开始认为我什至不应该打扰，并且可能不会在这个特定的应用程序中，但我认为能够根据视口的百分比调整大小真的很有用，尤其是对于移动应用程序。

所以我这样做是不是错了？除了 100 个视口之外，我不应该调整任何其他尺寸吗？我应该如何处理这个问题，是使用我正在尝试的 bootstrap 工具还是我目前不知道的最佳实践？

我希望那里的任何 CSS/bootstrap 巫师都知道一个技巧，我希望它对我和将来遇到这个问题的任何人都有帮助。

Answer 1

您不应该手动设置高度。您应该使用 flexbox grid 以适当的对齐 classes.

自动执行此操作

使用 class vh-100 在导航栏和内容元素周围放置一个弹性列。这可以只是 body 元素。
将 class flex-fill 放在内容元素上，使其伸展以填充剩余的 space。

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body class="d-flex flex-column vh-100">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- ... -->
      </div>
    </div>
  </nav>

  <div class="body-area container-fluid bg-dark text-light flex-fill">
    <div class="row">
      <div class="col">
        Hi
      </div>
    </div>
  </div>
</body>

我如何使用 Bootstrap 5 为 100 以外的值设置相对于视口的高度？

How an I set height relative to viewport for values other than 100 with Bootstrap 5?

html

css

django-templates

twitter-bootstrap

bootstrap-5