今天想写一个效果，进入网站顶部导航栏需要一个全屏背景图，这个需要根据不同的屏幕大小适应不同的高度（不能使用height为100%，这个涉及到最外层容器的高度，容易造成高度塌陷），所以需要一个确定高度值。
一开始最快反应就是document.body.clientHeight
确实拿到了屏幕高度，可是出现了一个问题，就是你一旦打开控制台以后再刷新页面，当前获取的clientHeight高度就变成了剪掉控制台的高度了。
就像下面这样：

当你打开控制台后：

关闭控制台后：

这就是问题所在，于是我找了资料，就有了下面这张图：

各种属性都试了一遍，依然不行，后来想到，自动触发屏幕大小高度发生变化，自动重新获取屏幕高度。
监听屏幕大小变化：

 window.onresize = function () { 
     console.log('浏览器窗口的大小被改变了');
 }

于是再次打开控制台就可以自动重新渲染屏幕高度了。

工具栏高度：

let 工具栏高度 = window.outerHeight - window.innerHeight;