zoukankan      html  css  js  c++  java
  • Nuxt.js 中设置 div的css的 height 为100%

    使用过nuxt的小伙伴们总是被各种问题所坑。

    因为nuxt中我们直接操作的根div并不是真的根如图:

    这里多说一句,不管用什么框架,多用浏览器的开发者模式观察,能解决很多问题。

    可以看到div的样式是是一个叫id叫__nuxt的,不是我们加上去的。

    这里明确几个概念,

    height:100% 指的是相对于父元素的高度

    html,body 是最根的元素,且默认高度不是100%

    一般我们这么设置(因为一般自己定义的div就是紧邻body的,body就是这个div的父元素)

    
    html,body{height:100%}
    
    .custom-page{height:100%}(这里这个样式会应用在我们nuxt中page文件夹的下vue文件的根div)
    

    如上设置nuxt中无效。因为page中我们自己写的根div,并不是真的紧邻body标签的那一个。

    因为通过开发者控制台我们已经知道了div的结构,所以正确的方式css这么写,如果没有成功,确保css没有被其他css覆盖。

    html,
    body,#__nuxt,#__layout,#__layout{
      height: 100%;
      margin: 0;//消除浏览器默认的margin,可以不加
      padding: 0;//消除浏览器默认的padding,可以不加
    }
    .custom-page{
        height: 100%;
    }
    

    还有一个简单的方法不需要去管任何父元素

    .custom-page{
        height: 100vh;
    }
    

    单位vh:相对于视口的高度。视口被均分为100单位的vh。 css3的单位,兼容性问题请自行查阅vh的详细信息。

    参考博客:https://blog.lakehani.com/?id=60

    今天你学习了吗!!!
  • 相关阅读:
    excel 2003系列
    DataTab转换XML XML转换DataTable 的类[转]
    全角转半角与半角转全角
    Day2
    Day6 && Day7图论
    Day1
    Android为何以及如何保存Fragment实例
    Android应用的本地化及知识拓展之配置修饰符
    Leetcode NO.136 Single Number 只出现一次的数字
    经典排序算法(四) —— Quick Sort 快速排序
  • 原文地址:https://www.cnblogs.com/nayek/p/12531401.html
Copyright © 2011-2022 走看看