vue中,在全局样式表中设置了html,body,#app的height为 100%,但导入后只有html和body生效了,为啥?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中,在全局样式表中设置了html,body,#app的height为 100%,但导入后只有html和body生效了,为啥?相关的知识,希望对你有一定的参考价值。
全局样式表中设置了html,body,#app的height为 100%,导入样式表后只有html,和 body的高度为100%,#app的高度没有生效
参考技术A #app是div吧,你设置一下宽度试试vue less scope的样式中添加全局样式,或者针对本页面的 html body等app外层元素添加样式的一些方法
1、vue less scope的样式中添加全局样式。
使用场景:
例如
<div class="bd" v-html="htmlStr"></div> 其中, htmlStr = ‘<span class="title">标题</span>‘
如果我们使用 scoped样式, .bd .title{} 则无法生效。
可以使用深指向。例如
.bd >>> .title{}
则可以对起作用。 因为less loader等loaders 会自动忽略 >>>
注意,部分loader对 >>> 不能解析, 可以更换为 /deep/
.bd /deep/ .title{}
两种方法是等价的。
2、在页面中单独设置body或者html等app外层的元素属性。
首先,我们想到的当然是页面内新增一个 不带scoped的style标签。 不过这样写了之后,发现其他页面也收到污染。 因此,考虑通过在created声明周期中进行添加,然后再beforeDestroyed周期中移除一个class的方式。
例如:
created() { document.body.classList.add(‘body-home‘); }, beforeDestroy() { document.body.classList.remove(‘body-home‘); },
以上是关于vue中,在全局样式表中设置了html,body,#app的height为 100%,但导入后只有html和body生效了,为啥?的主要内容,如果未能解决你的问题,请参考以下文章