sticky footer 布局

在网页设计中，sticky footer设计是最古老的和常见的效果之一，大多数人都应该经历过。它可以概括如下：当页面内容不足一屏时，footer在页面的最底部；当内容超过一屏时，footer在内容的最下面。如下图所示：

超过一屏.png

�不足一屏.png

解决方法

1.内容区域负padding

这种套路的思路是给内容区域设置min-height:100%,将footer推到屏幕最下方，然后将footer设置margin-top，其值为footer的高度，内容区域设置负padding-bottom值要大于或等于footer的高度，不能小于，一旦小于就会遮盖footer的内容

<小例子>

html代码：

    

        

            主要内容
        
  
    
    
底部

css代码：
*{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .container{
            width: 100%;
            min-height: 100%;
        }
        .content{
            font-size:24px;
            padding-bottom: 50px;
        }
        .footer{ 
            bottom:0;
            width:100%;
            height:50px;
            background:red;
            margin:-50px auto 0 auto;
            
        }

2.将内容区域的底部外边距设为负数

这是一个比较主流的用法，把内容部分最小高度设为100%或100vh，再利用内容部分的负底部外边距值来达到高度不满时，footer保持在窗口底部，当高度超出则随之推到内容的底部。

html代码：

 
        

            

            内容
            
    
            
        
        

    

CSS代码

*{
                margin:0; padding: 0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .container{
                width:100%;
                min-height:100%;        
            }
            .content{
                font-size: 48px;
                margin-bottom:-50px;
            }
            .sitg{
                height:50px;
            }
            .footer{
                width:100%;
                height:50px;
                background-color:red;
                position: relative;
            }

3.使用calc( )设置内容高度

有一种方法不需要多余元素——使用css3新增的计算函数calc( ),这样元素之间就不会有重叠发生，也不需要控制内外边距了

HTML代码

        

            书写的内容
        
        

    

CSS代码：

*{
                margin: 0;
                padding: 0;
            }
            .content {
                min-height: calc(100vh - 50px);
                font-size: 36px;
                background-color: yellow;
            }
            .footer {
                 height: 50px;
                 background:red;
            }

4.使用Flexbox弹性盒模型布局

HTML代码：

    

          内容
    
    

CSS代码：

    *{
                margin:0;
                padding:0;
            }
            html{
                height:100%;
            }
            body{
                min-height: 100%;
                display: flex;
                flex-direction: column;
            }
            .container{
                flex:1;
                font-size:36px;background-color: yellow;
            }
            .footer{
                width:100%;
                height:50px;
                background:red;
            }

5.Grid网格布局

HTML代码：

    

        内容
    
    

CSS代码：

    *{
                margin:0;
                padding:0;
            }
            html{
                height:100%;
            }
            body{
                min-height: 100%;
                display: flex;
                flex-direction: column;
            }
            .container{
                flex:1;
                font-size:36px;background-color: yellow;
            }
            .footer{
                width:100%;
                height:50px;
                background:red;
            }

注：网格布局（Grid layout）目前仅支持Chrome Canary 和Firefox Developer Edition版本