导航栏和粘性 Bootstrap 页脚之间的 100% 高度

Posted 2023-03-21

【中文标题】导航栏和粘性 Bootstrap 页脚之间的 100% 高度

【英文标题】：100% height between navbar and sticky Bootstrap footer

【发布时间】：2015-11-15 20:18:23

【问题描述】：

在这个项目http://fiddle.jshell.net/e43duahb/

我希望类 apresentacao 的 div 的窗口高度小于页脚的 100 像素。

我已经尝试过 jQuery <script>$(".apresentacao").css('min-height', $(window).height()-'100px');</script>，但它不起作用。

【参考方案1】：

有一个名为 calc 的 CSS 函数开始得到很好的支持。语法如下：

height: calc(100vh - 100px);

或

height: calc(100% - 100px);

（注意运算符周围的空格很重要）

这允许在 CSS 中实现真正的动态计算支持。使用预处理器，您只能将静态长度与静态长度以及相对长度与相对长度相结合。

自 Chrome 19、Firefox 4 和 IE9 起支持计算。该功能没有得到足够广泛的支持，无法广泛使用，但在未来不会太远，值得记住和期待。

【讨论】：

谢谢！我想它会完美运行，但我决定使用 jQuery 解决方案。我会将您的解决方案牢记在心，以备将来的项目使用。

【参考方案2】：

尝试用这个$(window).height()-100 + 'px'替换$(window).height()-'100px'

这里是小提琴：http://fiddle.jshell.net/uhf4ss03/