css height 100% 和 100vh 区别

最新推荐文章于 2024-08-24 00:18:19 发布

동경

最新推荐文章于 2024-08-24 00:18:19 发布

阅读量1.2k

点赞数

分类专栏： Html Css 文章标签： css

本文链接：https://blog.csdn.net/weixin_43814775/article/details/113830321

版权

Html Css 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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>