Javascript 从网站的屏幕大小获取缺少的高度

网站结构如下：

1顶栏

2导航栏

3适合缺失屏幕大小的画布

4底杆

我的问题是：如何获得画布缺少的屏幕大小，例如，用户打开站点时，顶部栏获得的高度css属性包含：46px，导航栏获得的高度46px和底部栏：46px

我如何从100%得到缺失的屏幕大小以适应整个缺失的屏幕，以下是一个屏幕截图：

红色标记区域是我需要填充屏幕的缺失尺寸

---

我希望有人能帮我。

我想你要找的是vh，这是视野高度

类似于.contents{width:100%；height:calc100vh-92px}

参见示例

---

这将在页眉和页脚减去92px后，将div设置为剩余页面的100%。

请提供一个html和css示例。只完成了一半，可以在这里看到：遗憾的是，还没有实现底部栏。我不明白您想要红色区域高度还是红色区域高度？screen.height document.getElementById'topbar'。offsetHeight document.getElementById'navbar'。offsetHeight document.getElementById'bottombar'。offsetHeight；你需要更具体地说明你真正需要什么。你可以把一个高度为100%的元素放在里面，它会被填满，但是如果你需要在JS中得到这个数字，你必须按照Teymur的建议去做。虽然我会使用jQuery，因为你已经在使用它了。我想要红色区域的高度谢谢你，这正是我一直在寻找的。