底部始終在最底部的五種方法

1.設置下邊距爲負值等於底部高度

 css：   

    html, body {
            height: 100%;
            margin: 0
        }
        .footer {
            width: 100%;
            background-color: firebrick;
        }

        .content {
            min-height: 100%;
            margin-bottom: -50px
        }

        .push, footer {
            height: 50px
        }

htm：

<div class="content">

    <div class="push"></div>
</div>
<div class="footer"></div>

2.設置上邊距爲負值等於底部高度

css：

html, body {
            height: 100%;
            margin: 0
        }
        .footer {
            width: 100%;
            background-color: firebrick;
            height:50px;
            margin-top:-50px;
        }

        .content {
            min-height: 100%;
        }

        .push{
            padding-bottom:50px;
        }

3.使用flexbox

       html{height:100%}
        body{min-height:100%;display:flex;flex-direction:column}
        .content{flex:1}
       .footer{background-color:firebrick;height:50px}

    <div class="content">

    </div>     <div class="footer"></div>