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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Tensorflow数据读取之tfrecord

    Tensorflow数据读取之tfrecord文章目录tfrecordtfrecord的使用流程写入tfrecord文件读取tfrecord文件tfrecord中的数据格式tfrecord中对于变长数据和定长数据的处理tfrecord中生成batch_data的方法插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数…

    2025年6月11日
    0
  • 分布式事务解决方案之TCC(Hmily)「建议收藏」

    分布式事务解决方案之TCC(Hmily)「建议收藏」1什么是TCC事务TCC是Try、Confirm、Cancel三个词语的缩写,TCC要求每个分支事务实现三个操作:预处理Try、确认Confirm、撤销Cancel。Try操作做业务检查及资源预留,Confirm做业务确认操作,Cancel实现一个与Try相反的操作即回滚操作。TM首先发起所有的分支事务的try操作,任何一个分支事务的try操作执行失败,TM将会发起所有分支事务的Cancel操作,若try操作全部成功,TM将会发起所有分支事务的Confirm操作,其中Confirm/Cancel操作若执

    2022年5月11日
    38
  • MySQL默认隔离级别是RR,但是为什么一些大厂会改成RC?

    MySQL默认隔离级别是RR,但是为什么一些大厂会改成RC?为什么默认隔离级别是RR?可能大部分人都只知道MySQL的隔离级别有4个,分别是RU读未提交、RC读已提交、RR可重复读和Serializable可串行化,很少有人知道MySQL默认的隔离级别是RR,Oracle默认的隔离级别是RC。那就更少有人知道为什么MySQL默认的隔离级别是RR了。我也是刚刚工作之余看到了一篇文章,里面简单提了一下这个问题,我就四处找寻了一下答案,将自己所理解的记录下来,希望对大家有帮助。理解脏读、不可重复读、幻读脏读:某个事务对一份数据执行了更新操作,另一个事务在此时读

    2022年9月3日
    3
  • haoxav.com forum.php,www.wwwhaoav17com.us

    haoxav.com forum.php,www.wwwhaoav17com.usDomainName:WWWHAOAV17COM.USDomainID:D58643421-USSponsoringRegistrar:TODAYNIC.COM,INC.SponsoringRegistra…

    2022年4月29日
    77
  • MySQL具体解释(19)———-海量数据分页查询优化

    MySQL具体解释(19)———-海量数据分页查询优化

    2022年1月27日
    46
  • vue框架中用于表单数据绑定的指令_jsp获取表单数据

    vue框架中用于表单数据绑定的指令_jsp获取表单数据v-modelv-model指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值绑定的属性和事件v-model在内部为不同的输入元

    2022年7月31日
    2

发表回复

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

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