Html 如何在没有垂直滚动的情况下指定屏幕的全高？

我希望橙色和蓝色区域位于屏幕的末端，或者屏幕的全尺寸减去导航栏的高度。我一使用

vh-100

它就有了完整的高度，但它创建了一个我不想要的垂直滚动条。所以我想要屏幕的全高或者没有滚动条的总高。我该怎么做？引导程序中是否有类似于

vh-100-导航栏高度的东西，以便所有东西都适合（但导航栏没有“真实”高度。因此我没有定义导航栏的高度）？或者，我怎么能说它应该在不创建垂直滚动条的情况下占据整个高度



引导示例








带有内联元素的导航栏文本
聊天
苏晨
正文
图标
德国天文学会
艾因加贝
形式
一种方法是使用
行上的高度：
calc（100vh–3.5rem）
将底部部分的高度设置为视图端口高度减去导航栏高度（56px或3.5rem）

或者我添加到代码中的另一个选项是使用flex

Calc将适用于所有现代浏览器，加上IE9和更高版本，而flex适用于所有现代浏览器，加上IE11











带有内联元素的导航栏文本
聊天
苏晨
正文
图标
德国天文学会
艾因加贝
形式
执行以下操作-

步骤1:从代码中删除所有100 vh类

步骤2:添加以下代码：
<script>
    navHeight = document.querySelectorAll('.navbar-expand-lg')[0]
        .clientHeight;

    document.querySelectorAll('.container-fluid>.row>div')[0].style.height = `calc(100vh - ${navHeight}px)`;
    document.querySelectorAll('.container-fluid>.row>div')[1].style.height = `calc(100vh - ${navHeight}px)`;
</script>