Q. 在创建vue项目中, 当我们想去设置路由页面背景的时候,即使你给div设置了背景颜色,它背景显示的高度都只是你子元素盒子的高度,设置了 *height: 100%*依旧如此,那这究竟是什么导致的呢?
默认的app.vue文件的html,body, #app 都默认高度为 0,所以在子元素中设置高度并不能百分比高度达到效果。
解决方式:
- 我们可以对 html, body ,#app 设置高度
html, body, #app { height: 100%; margin: 0; padding: 0; }
- 为了提高可复用性, 在assets目录中创建一个global.css,并且在main.js入口文件中导入这个文件
import './assets/css/global.css'
- 然后就可以在对应的路由组件中设置 height: 100%,设置背景就可生效了