更新一种更简单的 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
})
})
},
})