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

【问题标题】：How an I set height relative to viewport for values other than 100 with Bootstrap 5?我如何使用 Bootstrap 5 为 100 以外的值设置相对于视口的高度？
【发布时间】：2021-12-26 03:59:16
【问题描述】：

这是尝试创建我过去创建的一种 div 类型，但使用具有最少非引导 css 的自定义样式表。它还没有完全实现，但我正试图将我写到我的 django 静态文件 CSS 中的每个样式规则转换为引导类。我被困在基于视口的大小上。

在我发现这些文档之前的状态是这样的，其高度符合您的预期：

I discover this wonderful little bit in Bootstrap 5

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

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

太棒了！只需将其剃掉一点，使其真正适合实际视口，并获得所需的最终状态。

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

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

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

以防万一，这是该 div 的 html（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 是通过基本模板应用的，由于背景渐变正确显示，您可以看到它的工作原理（否则它会在没有 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 的视口，我不应该调整任何尺寸吗？我应该如何解决这个问题，无论是使用我正在尝试的引导工具还是我目前不知道的最佳实践？

我希望任何 CSS/bootstrap 向导都知道一个技巧，我希望这对我和其他任何人在未来都会有帮助。

【问题讨论】：

标签： html css twitter-bootstrap django-templates bootstrap-5

【解决方案1】：

您不应该手动设置高度。您应该使用flexbox grid 使用适当的对齐类自动执行此操作。

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

<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>

【讨论】：