Vue 中关于页面全屏的样式定义

vue开发中很需要页面全屏,尤其是实在登录页面的时候.

但是经常设置 height: 100%;不起作用.

 

原因分析:

给div设置高度100%时，div的高度会等同于其父元素的高度。单文件中的 div（即为vue挂载的div）的父节点是是body标签，body标签的父节点是html标签。

在默认情况下html和body标签的高度为auto，而浏览器是不会自动给标签添加高度的，所以html和body标签就为0，自然子div的高度设置为100%就不起作用了。

 

所以,在App.vue中:

<template>
    <!-- 入口文件简单点 -->
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'App'
    }
</script>

<style>
    /* 定义全局样式属性 */
    html,
    body,
    #app {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>