CSS實現高度自適應鋪滿整屏的案例

這篇文章主要介紹CSS實現高度自適應鋪滿整屏的案例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在自己寫demo的過程中，想使用display:flex實現垂直居中，代碼如下：

<style>
    #login{
        width:100%;
        height: 100%;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    .login-body{
        width: 600px;
        height: 260px;
        border: 1px solid #000;
    }
</style>

并不能實現我想要的效果，外層的父元素高度沒有占滿整個屏幕。。

解決：給#login一個min-height: 100vh，配合 display: flex; justify-content: center; align-items: center;實現垂直居中。

<style>
    #login{
        width:100%;
        min-height: 100vh;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    .login-body{
        width: 600px;
        height: 260px;
        border: 1px solid #000;
    }
</style>

視口單位(Viewport units)

什么是視口？

在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域；而在移動端，它涉及3個視口：Layout Viewport（布局視口），Visual Viewport（視覺視口），Ideal Viewport（理想視口）。

視口單位中的“視口”，桌面端指的是瀏覽器的可視區域；移動端指的就是Viewport中的Layout Viewport, “視區”所指為瀏覽器內部的可視區域大小，即window.innerWidth/window.innerHeight大小，不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小。。

根據CSS3規范，視口單位主要包括以下4個：

1.vw：1vw等于視口寬度的1%，視框寬度是100Vw。

2.vh：1vh等于視口高度的1%，視框高度是100Vh。

3.vmin：選取vw和vh中最小的那個。

4.vmax：選取vw和vh中最大的那個。

以上是“CSS實現高度自適應鋪滿整屏的案例”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！