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


相关推荐

  • 手机JAVA编程技术[通俗易懂]

    JAVA手机编程技术林天峰(温州职业技术学院计算机系浙江

    2022年4月11日
    56
  • mybatis实现原理,动态代理_jdk动态代理实现原理

    mybatis实现原理,动态代理_jdk动态代理实现原理前言一直以来都在使用MyBatis做持久化框架,也知道当我们定义XXXMapper接口类并利用它来做CRUD操作时,Mybatis是利用了动态代理的技术帮我们生成代理类。那么动态代理内部的实现细节到底是怎么的呀?XXXMapper.java类和XXXMapper.xml到底是如何关联起来的呀?本篇文章就来详细剖析下MyBatis的动态代理的具体实现机制。MyBatis的核心组件及应用在详细探究MyBatis中动态代理机制之前,先来补充一下基础知识,认识一下MyBatis的核心组件。SqlSessio

    2022年8月8日
    4
  • excel中如何隐藏列和取消隐藏列[通俗易懂]

    excel中如何隐藏列和取消隐藏列[通俗易懂]https://jingyan.baidu.com/article/148a192191dc9a4d71c3b11c.htmlexcel如何隐藏列1先看下原表格是怎么样的。2隐藏列方法一:首

    2022年8月2日
    6
  • cmd查看端口被占用并关闭「建议收藏」

    cmd查看端口被占用并关闭「建议收藏」1、netstat-nao|findstr”8000″2、tasklist|findstr”157468″3、taskkill/f/t/imCLodopPrint64.exe

    2022年5月12日
    41
  • linux重命名文件名_linux 文件重命名

    linux重命名文件名_linux 文件重命名https://blog.csdn.net/weixin_33724570/article/details/91909917https://blog.csdn.net/csdnnews/article/details/87927567https://blog.csdn.net/weixin_34329187/article/details/93004715https://blog…

    2022年9月10日
    4
  • Lambda plus: 云上大数据解决方案

    Lambda plus: 云上大数据解决方案本文会简述大数据分析场景需要解决的技术挑战,讨论目前主流大数据架构模式及其发展。最后我们将介绍如何结合云上存储、计算组件,实现更优的通用大数据架构模式,以及该模式可以涵盖的典型数据处理场景。大数据处理的挑战现在已经有越来越多的行业和技术领域需求大数据分析系统,例如金融行业需要使用大数据系统结合VaR(valueatrisk)或者机器学习方案进行信贷风控,零售、餐饮行业需要大数据系统…

    2022年6月2日
    30

发表回复

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

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