2019-06-26vue设置组件高度100%

方法1(成功)

设置单位为100vh。


方法2:我试了一下,没成功(可能要在App.vue设置)。

给div设置高度100%时,div的高度会等同于其父元素的高度。而上面代码中id为app的div(即为vue挂载的div)的父节点是是body标签,body标签的父节点是html标签。在默认情况下html和body标签的高度为auto,而浏览器是不会自动给标签添加高度的,所以html和body标签就为0,自然子div的高度设置为100%就不起作用了。

<template>
  <div id="app">
     我是根节点
  </div>
</template>
html,body,#app {height: 100%;}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,840评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,844评论 1 45
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,615评论 0 7
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,721评论 0 7
  • 我们的学校可美了,校园里处处有着迷人的景色,我非常喜欢,尤其是花坛边,她就像美丽的小姑娘在阳光的照耀下,变得五...
    夏卫英阅读 2,829评论 0 3