CSS Sticky footer 布局

时间 2021-01-01
应用场景：一个页面的内容不够长的话，页脚内容会自动固定在页面底部，当页面内容够长的话，页脚内容自己向下推动。
这个时候如果运用fixed布局的话，页脚内容会一直固定在底部，所以这个时候会应用到Sticky footer 布局。
下面是一种我常用的方式：
效果图：
内容不够固定底部内容：内容够多自动下移：
代码：
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>user</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style type="text/css">
            html,body {
                font-family: "microsoft yahei,arial, helvetica, sans-serif";
            }
            *{
                box-sizing: border-box;
            }
            .btn{
                font-size: 14px;
                font-weight: 400;
                line-height: 1.42;
                position: relative;
                display: inline-block;
                margin-bottom: 0;
                padding: 3px 12px;
                cursor: pointer;
                -webkit-transition: all;
                transition: all;
                -webkit-transition-timing-function: linear;
                transition-timing-function: linear;
                -webkit-transition-duration: .2s;
                transition-duration: .2s;
                text-align: center;
                text-decoration: none;
                vertical-align: top;
                white-space: nowrap;
                color: #333;
                border: 1px solid #ccc;
                border-radius: 3px;
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
                border-bottom-left-radius: 3px;
                background-color: #fff;
                background-clip: padding-box;
            } 
            .btn-success{
                color: #fff;
                border: 1px solid #4cd964;
                background-color: #4cd964;
                letter-spacing: 1px;
            } 
            .mui-btn-block{
                font-size: 18px;
                display: block;
                padding: 10px 0;
            }
            .clearfix{
                display: inline-block;
            }
            .clearfix:before{
                display: table;
                clear: both;
            }
            .clearfix:after{
                display: table;
                content: "";
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .sticky-box{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgb(51,51,51);
            }
            .box-body{
                min-height: 100%;
                width: 100%;
            }
            .body-main{
                padding: 15px;
                padding-bottom: 80px;
            }
            
            .box-footer{
                position: relative;
                padding: 15px;
                margin-top: -80px;
                clear: both;
            }
            
            h3{
                margin: 0;
                padding: 2rem 0;
                text-align: center;
                color: #fff;
                font-size: 22px;
                letter-spacing: 1px;
            }
            .text-box{
                text-align: center;
                color: #fff;
            }
            .info-box{
                padding: 1rem 1.5rem;
                margin: .5rem .5rem 2rem;
                background-color: #232323;
                font-size: 14px;
                border-radius: 100px;
                -moz-border-radius: 100px;
                -webkit-border-radius: 100px;
                box-shadow: inset 0 5px 10px -5px #191919, 0 1px 0 0 #444;
                -moz-box-shadow: inset 0 5px 10px -5px #191919,0 1px 0 0 #444;
                -webkit-box-shadow: inset 0 5px 10px -5px #191919, 0 1px 0 0 #444;                
            }
            .info-box p{
                margin: 0;
                line-height: 1.5;
                text-align: left;
                font-size: 12px;
                color: #fff;
            }
        </style>
    </head>

    <body>
        <div class="sticky-box">
            <div class="box-body clearfix">
                <div class="body-main">
                    <h3>CSS Sticky Footer</h3>
                    <div class="text-box">
                        <p>内容如果很多的话</p>
                        <p>内容如果很多的话</p>
                        <p>内容如果很多的话</p>
                        <p>内容如果很多的话</p>
                        <p>内容如果很多的话</p>
                    </div>
                    
                    <div class="info-box">
                        <p>提示文字:我下方是一个在内容不够使固定在底部，在内容多出时，自动下移的按钮</p>
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <a href="javascript:;" class="btn btn-success mui-btn-block">我是一个按钮</a>            
            </div>
            
        </div>

    </body>

</html>