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的动画类 Fx.js
Nov 05 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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
短波问题解答
2021/02/28 无线电
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
php字符串截取的简单方法
2013/07/04 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
Python内存管理实例分析
2019/07/10 Python
python 默认参数相关知识详解
2019/09/18 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
幼儿园教师辞职信
2014/01/18 职场文书
运动会广播稿30字
2014/01/21 职场文书
加薪申请报告范本
2015/05/15 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
六一儿童节致辞
2015/07/31 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
超级详细实用的pycharm常用快捷键
2021/05/12 Python
Go语言设计模式之结构型模式
2021/06/22 Golang