国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

sticker-footer 布局

187J3X1 / 2526人閱讀

摘要：嵌套層級(jí)不深，可直接繼承自我是內(nèi)容我是腳為本身高度為本身高度嵌套層級(jí)很深，無(wú)法直接從上級(jí)繼承百分比高度的第一種方法給需要的創(chuàng)建一個(gè)我是內(nèi)容我是腳這樣就可以直接從繼承百分比高度了當(dāng)高度超過(guò)時(shí)產(chǎn)生滾動(dòng)條繼承自內(nèi)部包裹的結(jié)構(gòu)，就

sticker-footer 1、嵌套層級(jí)不深，可直接繼承自 body width：100%； height:100%; 
// html

    

        
我是內(nèi)容

    

    


// css
html,body{
    width:100%;
    height:100%;
}
#sticker{
    width:100%;
    min-height:100%;
}
.sticker-con{
    padding-bottom:40px;    // 40px 為 footer 本身高度
}
.footer{
    margin-top:-40px;  // 40px 為 footer 本身高度
}
2、嵌套層級(jí)很深，無(wú)法直接從上級(jí)繼承 百分比高度的

第一種方法：給需要的 sticker-footer 創(chuàng)建一個(gè) wrapper

    
        

            

                
我是內(nèi)容

            

            
        

    

    .wrapper{
        position:fixed;  // 這樣 wrapper 就可以直接從 html,body 繼承 百分比高度了
        overflow:auto;   // 當(dāng)高度超過(guò) 100% ;時(shí)產(chǎn)生滾動(dòng)條
        width:100%;
        height:100%;     // 繼承自 body
    }
    // wrapper 內(nèi)部包裹的結(jié)構(gòu)，就如上所示了，css樣式也一樣
3. 當(dāng)無(wú)法用百分比獲取高度時(shí)，也可通過(guò)js方式獲得 
    //css樣式同第一種， 只是 sticker 的 min-height 用css獲取

    
        

            
我是內(nèi)容

        

        
    


    var sticker = document.querySelector("#sticker");
    var h = document.body.clientHeight;
    sticker.style.minHeight = h - 44 + "px";

    //這種方式也可應(yīng)對(duì)一些特殊情況，比如有頭部導(dǎo)航欄的情況，可以靈活的處理 min-height:
4. 強(qiáng)大的 flex 布局 flex-direction:column

將wrapper容器 display:flex; flex-direction:column

sticker: flex:1; 占據(jù)除footer以外的剩余空間




    
    
    sticker footer

    


    
我是頭部

    

        

            
我是內(nèi)容

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115573.html

相關(guān)文章

  • 實(shí)現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開(kāi)發(fā)十分常見(jiàn)，比如淘寶網(wǎng)的首頁(yè)，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開(kāi)發(fā)十分常見(jiàn)，比如淘寶網(wǎng)的首頁(yè)，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    golden_hamster 評(píng)論0 收藏0

  • 實(shí)現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開(kāi)發(fā)十分常見(jiàn)，比如淘寶網(wǎng)的首頁(yè)，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開(kāi)發(fā)十分常見(jiàn)，比如淘寶網(wǎng)的首頁(yè)，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    IamDLY 評(píng)論0 收藏0

  • 實(shí)現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開(kāi)發(fā)十分常見(jiàn)，比如淘寶網(wǎng)的首頁(yè)，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開(kāi)發(fā)十分常見(jiàn)，比如淘寶網(wǎng)的首頁(yè)，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    Hegel_Gu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

187J3X1

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<