vh——实现根据视口的高度，自适应某一部分的高度

最新推荐文章于 2022-11-02 20:25:34 发布

前端独秀

最新推荐文章于 2022-11-02 20:25:34 发布

阅读量806

点赞数

分类专栏：前端文章标签： CSS3 viewport

原文链接：https://www.mk2048.com/blog/blog.php?id=ic12b1ihj&title=vh%E2%80%94%E2%80%94%E5%AE%9E%E7%8E%B0%E6%A0%B9%E6%8D%AE%E8%A7%86%E5%8F%A3%E7%9A%84%E9%AB%98%E5%BA%A6%EF%BC%8C%E8%87%AA%E9%80%82%E5%BA%94%E6%9F%90%E4%B8%80%E9%83%A8%E5%88%86%E7%9A%84%E9%AB%98%E5%BA%A

版权

前端专栏收录该内容

493 篇文章 3 订阅

订阅专栏

vh是CSS3中的相对长度单位，表示相对视口高度（Viewport Height），视口被均分为100单位的vh，即1vh = 1% * 视口高度。

可以用来解决主体内容不足以撑起视口的剩余高度时，页面底部留白太多的尴尬问题。

demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,div {
            padding: 0;
            margin: 0;
        }
        div{
            text-align: center;
        }
        
        .header {
            width: 100%;
            height: 60px;
            background: #afe;
        }
        
        .main {
            width: 100%;
            min-height: calc(100vh - 60px - 80px);
        }
        
        .footer {
            width: 100%;
            height: 80px;
            background: #fae;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="header">
            <p>顶部定高：60px</p>
        </div>
        <div class="main">
            前提：顶部高度及底部高度固定
            <br/> 必要： 主体内容不足以达到视口的剩余高度时，根据设备视口实现主题内容高度的自适应。
        </div>
        <div class="footer">
            <p>底部定高：80px</p>
        </div>
    </div>
</body>

</html>

页面效果：

前端独秀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vh——实现根据视口的高度，自适应某一部分的高度

vh是CSS3中的相对长度单位，表示相对视口高度（Viewport Height），视口被均分为100单位的vh，即1vh = 1% * 视口高度。可以用来解决主体内容不足以撑起视口的剩余高度时，页...
复制链接

扫一扫