css中sticker-footer佈局如何使用

這次帶給大家css中sticker-footer佈局如何使用，使用css中sticker-footer佈局的注意事項有哪些，下面就是實戰案例，一起來看一下。

在網頁設計中，Sticky footers設計是最古老和最常見的效果之一，大多數人都曾經經歷過。它可以概括如下：如果頁面內容不夠長的時候，頁腳塊貼在視窗底部；如果內容夠長時，頁腳區塊會被內容向下推送。這種效果不僅是無所不在，很受歡迎，而且實現起來看起來也非常容易。但實際上實現起來比預期花的時間更多。此外，在CSS2.1的解決方案中幾乎都必須為頁腳設定一個固定高度。這是很脆弱的，很少是可行的。實際上要實現這個效果過於複雜，而且還需要增加特定的標記和一些Hack手段。在CSS2.1中受到一些限制，但使用現代CSS，我們能把這個效果做得更好，那又該如何做呢？

1、嵌套層級不深，可直接繼承自body width：100%；height:100%;

// html

    <p>
        </p><p>我是内容</p>
    
    <p>我是脚</p>

// 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、嵌套層級很深，無法直接從上級繼承百分比高度的

第一種方法：給需要的sticker-footer 建立一個wrapper

   
        <p>
            </p><p>
                </p><p>我是内容</p>
            
            <p>我是脚</p>
        
    

    .wrapper{
        position:fixed;  // 这样 wrapper 就可以直接从 html,body 继承 百分比高度了
        overflow:auto;   // 当高度超过 100% ;时产生滚动条
        width:100%;
        height:100%;     // 继承自 body
    }
    // wrapper 内部包裹的结构，就如上所示了，css样式也一样

3. 當無法用百分比取得高度時，也可透過js方式取得

    //css样式同第一种， 只是 sticker 的 min-height 用css获取
    
        <p>
            </p><p>我是内容</p>
        
        <p>我是脚</p>
    
    var sticker = document.querySelector('#sticker');
    var h = document.body.clientHeight;
    sticker.style.minHeight = h - 44 + 'px';
    //这种方式也可应对一些特殊情况，比如有头部导航栏的情况，可以灵活的处理 min-height:

4. 強大的flex 佈局flex-direction:column

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

sticker: flex:1; 佔據footer以外的剩餘空間

nbsp;html>


    <meta>
    <meta>
    <title>sticker footer</title>

<style>
    html,body{
        width: 100%;
        height: 100%;
        background-color: #ccc;
        margin:0;
        padding: 0;
        
    }
    header{
        height:44px;
        width: 100%;
        text-align: center;
        line-height: 44px;
    }
    #wrapper{
        display: flex;
        flex-direction: column;
        width: 100%;
        /*height: 100%;*/
    }
    #sticker{
        background-color: red;
        flex: 1;
    }
    #sticker .sticker-con{
        padding-bottom: 40px;
    }
    .footer{
        background-color: green;
        height: 40px;
    }
</style>    

    <header>我是头部</header>
    <p>
        </p><p>
            </p><p>我是内容</p>
        
        <p>我是脚</p>
    
    

<script>
    var wrapper = document.querySelector(&#39;#wrapper&#39;);
    var h = document.body.clientHeight;
    wrapper.style.minHeight = h - 44 + &#39;px&#39;;   // 减去头部导航栏高度
</script>

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

建議閱讀：

純css實作照片牆3D效果

Css繪製扇形圖案

以上是css中sticker-footer佈局如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！