如何在Bootstrap 5中设置非100%的视口相对高度？

问题核心原因 #

Bootstrap 5 原生的视口相对高度工具类默认仅提供 vh-100、min-vh-100 两个取值，你猜测的 vh-25、vh-50、vh-75 并未内置，所以设置后不会生效，只有vh-100能正常触发样式，这就是你遇到的现象的根本原因。

推荐实现方案（零额外高度相关自定义CSS） #

不要用固定比例的vh值适配剩余空间，用Bootstrap原生Flex布局工具类实现自适应占满剩余视口高度，兼容性更好、响应式表现更稳定：

1. 给全局body元素添加Bootstrap类 d-flex flex-column vh-100，替换你原有自定义CSS中给html、body设置的height: 100%规则
2. 给你的.body-area div添加类 flex-grow-1，该类会自动让容器占满父元素（body）减去导航栏、上下外边距后的所有剩余垂直空间，不需要手动计算高度比例
3. 你原有.body-area里的左右自动居中、75%宽度规则，也可以替换为Bootstrap原生类 mx-auto w-75，最终.body-area的类列表为：body-area bg-dark text-light my-5 flex-grow-1 mx-auto w-75

修改后你的自定义CSS仅需要保留边框、圆角规则即可，完全符合你尽量减少非Bootstrap CSS的需求：

.body-area {
  border: 10px solid #000000;
  border-radius: 15px;
}
body {
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

若确实需要使用自定义比例vh类 #

如果你的场景必须用固定比例的视口高度，只需在自定义CSS中补充以下规则即可让vh-25/50/75生效：

.vh-25 { height: 25vh !important; }
.vh-50 { height: 50vh !important; }
.vh-75 { height: 75vh !important; }

内容的提问来源于stack exchange，提问作者Tyk