CSS實現(xiàn)高度自適應(yīng)鋪滿整屏的案例

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

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

<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>

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

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

<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)

什么是視口？

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

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

根據(jù)CSS3規(guī)范，視口單位主要包括以下4個：

1.vw：1vw等于視口寬度的1%，視框?qū)挾仁?00Vw。

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

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

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

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