css height 100% 和 100vh 区别

css height 100% 和 100vh 区别1.height100%意思就是,想在这container设置高度![有约束]高度设置成100%但是呢这得看container的父级body的height是否为100%还往上看body的父级html的height是否为100%container->body->html[他们的height元素都要设置为100%]<html><head><style>html,bod

大家好,又见面了,我是你们的朋友全栈君。

1. height 100%

意思就是,想在这container设置高度! [有约束]

高度设置成 100%

但是呢这得看 container的父级 body的height是否为100%

还往上看body的父级 html的height是否为100%

container – > body – >html [他们的 height 元素都要设置为 100%]

<html>
    <head>
        <style> html,body{ 
     height: 100%; } .container{ 
     background: pink; height: 100%; } </style>
    </head>
    <body>
        <div class="container">
            <div>one</div>
            <div>two</div>
            <div">three</div>
        </div>
    </body>
</html>

2. height 100vh

意思就是,别的元素啥都不管,我就想在这 container 设置高度![没有约束]

高度设置成 100vh

<html>
    <head>
        <style> .container{ 
     background: pink; height:100vh; } </style>
    </head>
    <body>
        <div class="container">
            <div>one</div>
            <div>two</div>
            <div>three</div>
        </div>
    </body>
</html>

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/145095.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 有关单片机的毕业设计_1500一套毕业设计贵吗

    有关单片机的毕业设计_1500一套毕业设计贵吗对大部分同学来说,毕业设计根本不知道从哪下手,完全处于蒙圈状态,为帮助大家能顺利毕业,精心准备800多套单片机毕业设计与您分享!其中有基于单片机设计的数字示波器、倒车雷达、电子密码锁、智能家居、停车场管理系统、万年历、智能插座等不同方向的典型设计实例,每个实例都提供了设计报告、源代码、电路图等全部设计资料,这些设计资料有利于即将毕业的同学分析、理解并进行毕业设计的制作和论文的编写。下载链接见:800多套单片机毕业设计-阿波罗代码网0001、PC机与单片机通信(RS232协议)000.

    2022年10月4日
    1
  • sqlyog13.1.6激活成功教程版_sqlyog10.0安装教程

    sqlyog13.1.6激活成功教程版_sqlyog10.0安装教程1、SQLyog-12.2.4-0.x64Trial.exe,直接去官网下载。2、修改注册表项开始-运行-regedit,进入注册表HKEY_CURRENT_USER\Software\SQLyog修改权限拒绝修改。OK,激活成功教程完成。试用14天一直可以使用下去转载于:https://www.cnblogs…

    2022年9月14日
    0
  • java中stringBuilder常用方法[通俗易懂]

    java中stringBuilder常用方法[通俗易懂]String对象是不可改变的。每次使用System.String类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间。在需要对字符串执行重复修改的情况下,与创建新的String对象相关的系统开销可能会非常昂贵。如果要修改字符串而不创建新的对象,则可以使用System.Text.StringBuilder类。例如,当在一个循环中将许多字符串连接在一起时,使用StringBuilder类可以提升性能。通过用一个重载的构造函数方法初始化变量,可以创建StringBuild

    2022年7月17日
    25
  • Java学习资源整理

    Java学习资源整理好书推荐《JAVA编程思想》《JAVA核心技术卷1》《EffectiveJava》《Java并发编程的艺术》《深入理解Java虚拟机》《MySQL必知必会》网络协议,入门可以读《图解HTTP》、《图解TCP/IP》,如果要深入研究可以读《UNIX网络编程卷1》和《TCP/IP详解卷1》Servlet系列教材(一)-基础-教程:开发第一个Servlet-how2j.cn…

    2022年6月21日
    30
  • 费马小定理(易懂)_四年rain的博客_什么易懂

    费马小定理(易懂)_四年rain的博客_什么易懂费马小定理:内容:若存在整数a,p且gcd(a,p)=1,即二者互为质数,则有a^(p-1)≡1(modp)。(这里的≡指的是恒等于,a^(p-1)≡1(modp)是指a的p-1次幂取模与1取模恒等)(不理解的话请留言)证明:这里证明较为复杂需要先引出两个定理:引理一:若a,b,c为任意3个整数,m为正整数,且(m,c)=1,则当a·c≡b·c(modm)时,有…

    2022年10月21日
    0
  • SecureCRT中文乱码解决方法

    SecureCRT中文乱码解决方法SecureCRT中文乱码解决方法1、先选中当前的Session地址2、然后点击SercureCRT上排主菜单的“Options”,也就是“选项”的意思3、点击Options之后,会出现一个下拉列表,我们选择第一个“SessionOptions…”4、接着会出现一个弹出框,选择目录中的“Appearance”,该功能可以对SercureCRT的外观进行设置5、此时可以看到SercureCRT的编码格式是“Default”,也就是默认的编码格式,我们改为“UTF-8”6、改完编码格式之后,我们回

    2022年7月17日
    11

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号