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)
上一篇 2022年5月18日 上午7:20
下一篇 2022年5月18日 上午7:20


相关推荐

  • Django(55)GenericAPIView源码分析

    Django(55)GenericAPIView源码分析源码分析GenericAPIView继承自APIView,也就是在APIView基础上再做了一层封装,源码如下:classGenericAPIView(views.APIView):query

    2022年7月31日
    10
  • K8S状态为evicted

    K8S状态为evicted报错:xxisEvictedonxx主机查询找出Evicted状态节点kubectlgetpods|grepEvicted删除节点,自动重启kubectldeletepod$podName也可以通过脚本定时执行kubectlgetpods|grepEvicted|awk'{print$1}’|xargskubectldeletepodxargs是给命令传递参数的一个过滤器,可以将管道或标准输入的数据转换成参数原因

    2022年5月17日
    125
  • LOAM 原理及代码实现介绍[通俗易懂]

    LOAM 原理及代码实现介绍[通俗易懂]LOAM介绍paper:《LidarOdometryandMappinginReal-time》LOAM整体框架:将定位与建图分开运行,高频位姿估计+低频优化建图->实现实时,低计算量,低漂移。数据提取及处理:根据点的曲率c来将点划分为不同的类别(边/面特征或不是特征),在每一个sweep中,根据曲率对点进行排序,来作为评价局部表面平滑性的标准。一个sweep指完成一次完整的扫描,一次sweep分为多个scan,每一次sweep的雷达位姿定义为为这一sweep起始时的状态

    2025年10月26日
    5
  • Navicat 15 永久激活码【2022.01最新】

    (Navicat 15 永久激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html40ZKSWCX8G-eyJsaWNlbnNlSW…

    2022年4月2日
    2.1K
  • App测试面试题_软件测试算法面试题汇总

    App测试面试题_软件测试算法面试题汇总1.Web端测试和App端测试有何不同(常见)系统结构方面Web项目,b/s架构,基于浏览器的;Web测试只要更新了服务器端,客户端就会同步会更新;App项目,c/s结构的,必须要有客户端;App修改了服务端,则客户端用户所有核心版本都需要进行回归测试一遍;兼容方面Web项目:a.浏览器(火狐、谷歌、IE等)b.操作系统(Windows7、Windows10、Linux等)App项目:a.设备系统:iOS(ipad、iphone)、Android(三星、华为、联想等)、

    2022年8月29日
    9
  • OpenClaw本地部署指南[源码]

    OpenClaw本地部署指南[源码]

    2026年3月14日
    1

发表回复

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

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