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


Posted in Javascript onJuly 27, 2018

在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%无效的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
js实现拖拽功能
Mar 01 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
js验证账户名是否重复
May 26 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 #Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 #Javascript
JavaScript事件对象event用法分析
Jul 27 #Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 #Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 #Javascript
浅谈Redux中间件的实践
Jul 27 #Javascript
JavaScript多态与封装实例分析
Jul 27 #Javascript
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
Python随机读取文件实现实例
2017/05/25 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Django-imagekit的使用详解
2020/07/06 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
微信小程序调用python模型
2022/04/21 Python