vue项目中设置背景高度问题

简介: vue项目中设置背景高度问题

Q. 在创建vue项目中, 当我们想去设置路由页面背景的时候,即使你给div设置了背景颜色,它背景显示的高度都只是你子元素盒子的高度,设置了 *height: 100%*依旧如此,那这究竟是什么导致的呢?


默认的app.vue文件的html,body, #app 都默认高度为 0,所以在子元素中设置高度并不能百分比高度达到效果。


解决方式:


  1. 我们可以对 html, body ,#app 设置高度


html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}


  1. 为了提高可复用性, 在assets目录中创建一个global.css,并且在main.js入口文件中导入这个文件


import './assets/css/global.css'


  1. 然后就可以在对应的路由组件中设置 height: 100%,设置背景就可生效了
相关文章
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
9 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JavaScript
vue知识点
vue知识点
7 2
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
1天前
|
JavaScript
vue学习(14)深度监视
vue学习(14)深度监视
10 0
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
9天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
30 9
|
9天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
24 7