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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 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新手上路(六)
2006/10/09 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JavaScript中this详解
2015/09/01 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
详解js中Array的方法及技巧
2018/09/12 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
vue获取data数据改变前后的值方法
2019/11/07 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
详解python中的装饰器
2018/07/10 Python
matplotlib实现区域颜色填充
2019/03/18 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
pymysql模块使用简介与示例
2020/11/17 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
css3中transition属性详解
2014/09/02 HTML / CSS
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
创业计划书撰写原则
2014/01/25 职场文书
市级文明单位申报材料
2014/05/07 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
利用JavaScript写一个简单计算器
2021/11/27 Javascript
Android实现图片九宫格
2022/06/28 Java/Android