为何需设置style属性而非使用min-vh-100类实现页脚置底

min-vh-100 类不生效的常见原因及排查方案 #

• Bootstrap 版本不符合要求
  min-vh-100 是 Bootstrap 4.3 版本才正式新增的原生工具类，若项目引入的 Bootstrap 版本低于 4.3，该类默认不存在，自然无法生效。你可以检查当前引入的 Bootstrap CSS 版本，低于要求时升级到 4.3 及以上版本即可。
• 类样式被更高优先级的规则覆盖
  按照 CSS 优先级规则，类选择器的优先级低于内联样式、ID 选择器以及更具体的后代选择器。如果项目中存在其他针对body元素的min-height属性定义（比如全局样式中写了body {min-height: auto}这类规则），min-vh-100的样式就会被覆盖。你可以打开浏览器开发者工具，选中body元素，在样式面板查看min-height属性对应的规则，如果min-vh-100的规则被划了删除线，就能直接看到是哪条规则覆盖了它。
• 类名挂载错误或拼写错误
  检查 HTML 代码中body标签的类名是否正确书写为<body class="min-vh-100">，确认没有拼写错误、类名没有写在其他元素上，也没有被 JS 动态移除。
• 自定义编译 Bootstrap 时关闭了对应工具类
  如果你是通过 Sass 源码自定义编译 Bootstrap，需要检查$utilities配置项中是否保留了 min-height 相关的 vh 工具类生成规则，若手动删除了相关配置，编译后的 CSS 文件中不会包含min-vh-100类。

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