在单页面应用,想给单个页面添加背景颜色,但是直接给根标签添加background-color属性,即使添加了height:100%,也无法填满整个屏幕,只能填充内容区.
下面假设给home页添加背景颜色
方法一:
home页:
<style lang="scss" scoped>
.home{;
height: 100%;
background-color: rgb(156, 155, 155);
}
app.vue页:
body,html,#app{
width: 100%;
height: 100%;
}
这个方法不好,背景颜色只能覆盖整个屏幕的高度,若内容超过了屏幕高度,超出的部分也是没有背景颜色的.
方法二:
home.vue页:
<style lang="scss" scoped>
.home{;
height: 100%;
overflow: auto;
background-color: rgb(156, 155, 155);
}
// 去掉滚动条
.home::-webkit-scrollbar{
display: none;
}
用overflow:auto属性,此方法可行,
方法三:
app.vue页:
#app {
display: flex;
flex-direction: column;
}
home.vue页
.home{;
flex: 1;
height: 100%;
background-color: rgb(156, 155, 155);
}
推荐此方法