vh——實現根據視口的高度，自適應某一部分的高度

本文轉載自查看原文 2017-04-05 17:08 1357 viewport/ CSS3

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>

頁面效果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 tableView尾部多處一部分空白高度 js 實現遮罩某一部分如何下載github項目中的某一部分 CSS3自適應布局之視口高度 Flex布局實現一部分元素左對齊，一部分右對齊 iframe 嵌網頁只顯示網頁的某一部分 python ----------opencv截取圖片某一部分並保存使用 html2canvas 將頁面中某一部分轉為圖片下載巧用 git rebase 將某一部分 commit 復制到另一個分支 iframe 內顯示的網頁只顯示改網頁的某一部分！