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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
web打印小结
Jan 11 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
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模拟js函数unescape的函数代码
2012/10/20 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php汉字转拼音的示例
2014/02/27 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
javascript基础知识
2016/06/07 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
利用Python计算KS的实例详解
2020/03/03 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
自荐信格式简述
2014/01/25 职场文书
公司总经理岗位职责
2014/03/15 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书