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>