这是一个项目的踩坑记录
当我美滋滋的写完 CSS,min-height: 100vh
,想着该元素会随着视口的变化而调整大小。但当我在手机上用 Chrome 浏览器打开我的项目页面时,发现因为移动端浏览器的地址栏有时候隐藏,有时候出现,把我的页面底部给顶了出去(因为此时浏览器没有将 100vh 的高度调整为屏幕的可见部分的高度,而是将 100vh 设置为隐藏了地址栏的浏览器高度)。
于是我觉得采取用 JavaScript 来获取视口大小再加载到 div 上的方法。因为我的项目整体用的是 TypeScript,所以采用 TS 的写法。
代码如下
在 App.vue 中,<router-view>
上将style
绑定变量 autoHeight
。
<template>
<div>
<router-view :style="autoHeight"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import {Component} from 'vue-property-decorator';
let windowHeight = window.innerHeight;
@Component
export default class App extends Vue {
windowHeight = windowHeight;
autoHeight = {
height: ''
};
getHeight(): void {
this.autoHeight.height = windowHeight + 'px';
}
created(): void {
window.addEventListener('resize', this.getHeight);
this.getHeight();
}
}
</script>