资讯专栏INFORMATION COLUMN

vue中设置height:100%无效的问题

jindong / 2274人阅读

摘要:在中写新的的时候,如果在新页面中的模板中设置的时候一直无效。文件这时候设置是无效的,在的中发现仍然是设置高度时,的高度会等同于其父元素的高度。而上面中为的挂载的的父节点是标签,标签的父节点是标签。

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

App.vue文件




这时候设置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%;
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113578.html

相关文章

  • electron 仿制QQ登录界面

    摘要:首先来看看的登录界面准备开发制作一个窗口先主进程代码暂时调用界面基本布局我们先大概做一个这样的界面页面代码样式代码取消全部的外边距和内边距设置窗口的样式设置手型加一个边框调试样式最后要删除或者更改设置宽度必须要和主进程中设置的一样不能大于主 首先来看看qq的登录界面:showImg(https://segmentfault.com/img/bVbiu16?w=483&h=458); 准...

    youkede 评论0 收藏0
  • 微信小程序 bug 集中营

    摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13  Hello 小伙伴们,如果觉得本文还不错,记得给个...

    he_xd 评论0 收藏0
  • 微信小程序 bug 集中营

    摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13  Hello 小伙伴们,如果觉得本文还不错,记得给个...

    PascalXie 评论0 收藏0
  • 微信小程序 bug 集中营

    摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13  Hello 小伙伴们,如果觉得本文还不错,记得给个...

    lordharrd 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<