在自己寫demo的過程中，想使用display:flex實(shí)現(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>

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

解決：給#login一個min-height: 100vh，配合 display: flex; justify-content: center; align-items: center;實(shí)現(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中最大的那個。

到此這篇關(guān)于CSS 實(shí)現(xiàn)高度自適應(yīng)鋪滿整屏的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)CSS高度自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論