js 固定底部 footer/自动计算页面高度

更新一种更简单的 css 方法：

.main {
   /* header: 30px; footer:100px; total:130px*/ 
　　min-height: calc(100vh - 130px); 
}

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如： calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

除了 display: fixed，方法将 footer 固定在底部，记录下用 js 获取页面 innerHeight，计算出 main 的高度。

HTML：

<body>
  <header>header</header>
  <main class="main">main</main>
  <footer>footer</footer>
</body>

JS：

function windowHeight () {
　　　　 // header: 30px; footer:100px; total:130px
        let mainMinHeight = window.innerHeight - 130
        mainMinHeight = bodyMinHeight > 0 ? bodyMinHeight : 0
        document.getElementsByClassName('main')[0].style.minHeight = mainMinHeight + 'px'
}

vue 中使用：

new Vue({
    el,
    data () {
      return {
        windowHeight: 0,
      }
    },
    watch: {
      windowHeight: function (newHeight) {
        // brand-header: 36px; nav-header: 60px; footer:193px; main.margin-top: 5px; total:294px
        let mainMinHeight = newHeight - 294
        mainMinHeight = mainMinHeight > 0 ? mainMinHeight : 0
        document.getElementsByClassName('main')[0].style.minHeight = mainMinHeight + 'px'
      },
    },
    mounted () {
      this.windowHeight = window.innerHeight
      this.$nextTick(() => {
        window.addEventListener('resize', () => {
          this.windowHeight = window.innerHeight
        })
      })
    },
})