vue中设置height:100%无效的问题及解决方法

在vue.js中写新的components的时候，如果在新页面中的模板中设置height：100%的时候一直无效。

App.vue文件

<template>
 <div id="app">
  <router-view/>
 </div>
</template>

<script>
export default {
 name: 'App'
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
</style>

这时候设置height: 100%;是无效的，在chrome的Elements中发现height仍然是0px.

设置高度100%时，div的高度会等同于其父元素的高度。而上面中id为app的div（vue挂载的div）的父节点是body标签，body标签的父节点是html标签。在默认情况下html和body标签的高度为auto，而浏览器是不会自动给标签添加高度的，所以html和body标签就为0，自然子div的高度设置为100%就不起作用了。

此时应该在App.vue文件style中添加如下代码：

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

总结

以上所述是小编给大家介绍的vue中设置height 100%无效的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue中设置height:100%无效的问题及解决方法

    在vue.js中写新的components的时候,如果在新页面中的模板中设置height:100%的时候一直无效. App.vue文件 <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font

  • Vue中的v-for指令不起效果的解决方法

    我的代码之前类似下面的结构 <div id="example-1" v-for="item in items"> <ul> <li> {{ item.message }} </li> </ul> </div> 结果发现不好用,数据读入了但是没有显示 于是我后来看官网的例子才明白,原来是id和v-for不在一个层级上,官网的例子如下,我按照不在一个层级上改,果然好用了 <ul id=&quo

  • SpringBoot项目中分页插件PageHelper无效的问题及解决方法

    在Springboot项目中使用分页插件的时候 发现PageHelper插件失效了 我导入的是: 后来才发 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.10</version> </dependency> 现 PageHelper若要在Springbo

  • Vue中"This dependency was not found"问题的解决方法

    今天在初始化项目中,出现了一个奇怪的情况:明明路径是对的,但是编译的时候,一直报"This dependency was not found"的错. 代码如下: import Vue from 'vue' import App from './App' import router from './router' import 'common/stylus/index.styl' /* eslint-disable no-new */ new Vue({ el: '#app', rend

  • vue中使用refs定位dom出现undefined的解决方法

    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对比了一下之前使用ref定位的.vue文件,发现了他们之间的区别. 我们要想知道为什么会定位不到某个DOM节点,我们首先要理解mounted(){}这个钩子函数是用来做什么的. 下面是vue官方给出的vue生命周期(部分),正如官方所说的一样,一开始不必先理解,不过随这你的学习与使用,他的参考价值会越

  • vue中配置mint-ui报css错误问题的解决方法

    vue中配置mint-ui报css错误问题的解决方法

    在vue2.0中引入了mint-ui后总是报一个css的错误 但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会出错,这是为什么呢? 因为 在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入/src/目录下的css, 但是mint-ui是要冲node_modules目录去引入的,所以在web

  • 在PHP中设置、使用、删除Cookie的解决方法

    1.设置Cookie PHP用SetCookie函数来设置Cookie.必须注意的一点是:Cookie是HTTP协议头的一部分,用于浏览器和服务器之间传递信息,所以必须在任何属于HTML文件本身的内容输出之前调用Cookie函数. SetCookie函数定义了一个Cookie,并且把它附加在HTTP头的后面,SetCookie函数的原型如下: int SetCookie(string name, string value, int expire, string path, string doma

  • vue中设置echarts宽度自适应的代码步骤

    vue中设置echarts宽度自适应的代码步骤

    目录 问题描述 无自适应效果图 有自适应效果图 代码步骤 问题描述 我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应.本文记录一下设置echarts图表的自适应的步骤.我们先看一下没有做echarts自适应的效果 无自适应效果图 我们发现echarts图的宽度并没有随着页面宽度的变化而变化 有自适应效果图 很显然,这个才是我们想要的效果 代码步骤 echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行

  • vue中当图片地址无效的时候,显示默认图片的方法

    web项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况.这时候,图片就会显示一个叉. 对于项目中出现的这种情况,我们也可以不做处理,但是比较影响美观,所以我们都会使用一个默认的图片来代替图片原来的地址. <img :src="item.img" @error="imgError(item)" /> 给图片添加一个error校验,当图片加载失效的时候,就会调用该属性

  • vue中设置、获取、删除cookie的方法

    1.在src目录下的access下新建一个cookie.js, 内容如下: export function setCookie(c_name,value,expire) { var date=new Date() date.setSeconds(date.getSeconds()+expire) document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString() //console.lo

随机推荐