溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

css如何讓一個(gè)盒子的高度自適應(yīng)屏幕剩余的部分

發(fā)布時(shí)間：2022-03-14 13:56:28 來(lái)源：億速云 閱讀：1179 作者：iii 欄目：web開(kāi)發(fā)

這篇“css如何讓一個(gè)盒子的高度自適應(yīng)屏幕剩余的部分”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“css如何讓一個(gè)盒子的高度自適應(yīng)屏幕剩余的部分”文章吧。

　　要求：沒(méi)有數(shù)據(jù)的時(shí)候能夠充滿(mǎn)屏幕，數(shù)據(jù)超出屏幕就出現(xiàn)滾動(dòng)條

　　做法

　　1-讓容器高度充滿(mǎn)這個(gè)屏幕

　　在容器內(nèi)容很少的情況下，要想讓這個(gè)容器充滿(mǎn)整個(gè)屏幕：

　　——。container{

　　min-height:100vh;

　　display:flex

　　}——

　　2-讓容器高度充滿(mǎn)剩余屏幕高度

　　要讓容器充滿(mǎn)屏幕的剩余高度，用 vh 結(jié)合 flex 布局就可以實(shí)現(xiàn)。

　　——。content{

　　min-height:100vh;

　　display:flex

　　}

　　。header{

　　height:100px

　　}

　　。content{

　　flex:1

　　}

　　。footer{

　　height:100px

　　}——

以上就是關(guān)于“css如何讓一個(gè)盒子的高度自適應(yīng)屏幕剩余的部分”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手