css height 100% 和 100vh 区别

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>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43814775/article/details/113830321