前幾天被人問(wèn)，「如何把元素固定在容器底部」。（本來(lái)想直接把 demo 地址給他，結(jié)果沒(méi)找到，那么今天我們來(lái)補(bǔ)一下）

Demo 地址

想法&思路

如果是頁(yè)面底部，我們可以直接 position: fixed;bottom: 0; 基于瀏覽器定位直接實(shí)現(xiàn)。

但是他要的效果是基于父級(jí)容器，那么我們必須要使用其他手段來(lái)定位了

• relative 來(lái)限制 absolute，然后 bottom: 0，但是在內(nèi)容過(guò)長(zhǎng)的時(shí)候會(huì)導(dǎo)致顯示異常。所以我們需要做內(nèi)部滾動(dòng)。
• 如果做內(nèi)部滾動(dòng)，那么我們只要可以撐開(kāi)盒子即可。不需要絕對(duì)定位了

使用 flex 實(shí)現(xiàn)

• 父級(jí)使用 flex 布局，column 垂直排列。
• 父級(jí)定高（height、maxHeight），.content 子級(jí) flex:auto; 自動(dòng)撐開(kāi)。 或者 .content 做高度限制。

• footer 可以使用 absolute 加 padding ?；蛘咄耆蕾囄臋n流布局都可以

  .demo1{
        position: relative;
        padding-bottom: 40px;
        display: inline-flex;
        flex-direction: column;
    }
    .demo1 .footer{
        position: absolute;
        bottom: 0;
        left: 0;right: 0;
        margin: 0;
    }
    .demo1 .content{
        overflow: auto;
    }

calc 實(shí)現(xiàn)

如果不使用 flex ，那么我們可以用 calc 來(lái)減去 header 和 footer 空間。

<style>
    .demo3{
        position: relative;
    }
    .demo3 .content{
        overflow: auto;
        max-height: calc(100% - 40px);
    }
</style>

absolute 實(shí)現(xiàn)

如果 calc 兼容性不太好，那么還可以使用 absolute 將所有元素都脫離文檔流。

<style>
    .demo4{
        position: relative;
    }
    .demo4 .header,.demo4 .footer{
        position: absolute;
        margin: 0;
        top:0;left:0 ;right:0;
    }
    .demo4 .footer{
        top: auto;
        bottom: 0;
    }
    .demo4 .content{
        overflow: auto;
        height: 100%;
        padding-top: 30px;
        padding-bottom: 30px;
        margin: 0;
        box-sizing: border-box;
    }
</style>

到此這篇關(guān)于css如何把元素固定在容器底部的四種方式的文章就介紹到這了,更多相關(guān)css元素固定底部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論