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生效了,为啥?的主要内容,如果未能解决你的问题,请参考以下文章

vue 全局css 路由刷新后不生效

如何在全局样式表中设置角度4组件选择器的样式?

vue设置背景占满全屏

vue设置背景占满全屏

vue设置背景占满全屏

vue设置背景占满全屏