很多时候都需要让div或者其他标签元素自适应浏览器屏幕高度，比如左侧菜单高度自适应

所以可以用window.innerHeight然后绑定到元素上面

如图，我用vue，jq的也差不多。反正只要获取到window.innerHeight就行了。

<template>
  <div id="app" :style="htmlHeight">
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      htmlHeight: {
        height: '300px'
      }
    }
  },
  methods: {
    getHtmlHeight () {
      let htmlHeight = window.innerHeight + 'px'
      this.$set(this.htmlHeight, 'height', htmlHeight)
    }
  },
  mounted () {
    this.getHtmlHeight()
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
#app{
  background: red;
}
</style>

不过这个也有缺点。。。就是获取到的高度不包括任务栏占有的。

并且如果刚开始浏览器窗口是非最大状态，那么获取到的就是非最大状态下的高度，这样当用户在非最大状态下加载页面，然后又点击最大化按钮。。。那么就会出现空白。所以还是要慎重选择。