欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2020-11-23 15:57:44   作者：不愛敲代碼的南兮   我要評論
這篇文章主要介紹了CSS 實現(xiàn)高度自適應(yīng)鋪滿整屏的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(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)我想要的效果，外層的父元素高度沒有占滿整個屏幕。。

已經(jīng)橫向居中，login的高度并不是整個屏幕的高度

解決：給#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>

此時#login的高度自適應(yīng)整個屏的高度

視口單位(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 實現(xiàn)高度自適應(yīng)鋪滿整屏的實現(xiàn)的文章就介紹到這了,更多相關(guān)CSS高度自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論