sticker-footer 佈局

時間 2019-11-11

標籤 sticker footer 佈局简体版

原文原文鏈接

sticker-footer

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

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

// 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 自己高度
}

二、嵌套層級很深，沒法直接從上級繼承百分比高度的

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

<body>
        <div id="wrapper">
            <div id="sticker">
                <div class="sticker-con">我是內容</div>
            </div>
            <div class="footer">我是腳</div>
        </div>
    </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>
        <div id="sticker">
            <div class="sticker-con">我是內容</div>
        </div>
        <div class="footer">我是腳</div>
    </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>
    <div id="wrapper">
        <div id="sticker">
            <div class="sticker-con">我是內容</div>
        </div>
        <div class="footer">我是腳</div>
    </div>
    
</body>
<script>
    var wrapper = document.querySelector('#wrapper');
    var h = document.body.clientHeight;
    wrapper.style.minHeight = h - 44 + 'px';   // 減去頭部導航欄高度

</script>
</html>