css中sticker-footer布局如何使用

最後更新：2018-03-21 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

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

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

// html<body>    <p id="sticker">        <p class="sticker-con">我是內容</p>    </p>    <p class="footer">我是腳</p></body>

// csshtml,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

   <body>        <p id="wrapper">            <p id="sticker">                <p class="sticker-con">我是內容</p>            </p>            <p class="footer">我是腳</p>        </p>    </body>

    .wrapper{        position:fixed;  // 這樣 wrapper 就可以直接從 html,body 繼承 百分比高度了        overflow:auto;   // 當高度超過 100% ;時產生捲軸        width:100%;        height:100%;     // 繼承自 body    }    // wrapper 內部包裹的結構，就如上所示了，css樣式也一樣

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

    //css樣式同第一種， 只是 sticker 的 min-height 用css擷取    <body>        <p id="sticker">            <p class="sticker-con">我是內容</p>        </p>        <p class="footer">我是腳</p>    </body>    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以外的剩餘空間

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">    <title>sticker footer</title></head><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>    <body>    <header>我是頭部</header>    <p id="wrapper">        <p id="sticker">            <p class="sticker-con">我是內容</p>        </p>        <p class="footer">我是腳</p>    </p>    </body><script>    var wrapper = document.querySelector('#wrapper');    var h = document.body.clientHeight;    wrapper.style.minHeight = h - 44 + 'px';   // 減去頭部導覽列高度</script></html>

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More