实现 stick footer 布局的几种方式

标签：css-常用技巧

下面的 css 和 js 是本文章案例中的公共代码段,默认下面每个小dom都引用了这两段代码

    * {
      padding: 0;margin: 0;
      box-sizing: border-box;
    }
    html body .hidden {display: none;}

    .color-ff7d7d {background-color: #ff7d7d;}
    .color-fbbb44 {background-color: #fbbb44;}
    .color-beb1cd {background-color: #beb1cd;}
    .color-7db9a9 {background-color: #7db9a9;}

    .clearfix::after,
    .clearfix::before {
      display: table;
      content: "";
    }
    .clearfix::after {
      clear: both;
    }

document.querySelector('#btn').addEventListener('click', function () {
    document.querySelector('.wrap .content-text').classList.toggle('hidden');
  }, false);

1. 这种 stick footer 的方式会增加一个多余的元素：即下面的div.push元素

    body {
      font-size: 30px;
      line-height: 1.5;
    }
    body,
    html {
      height: 100%;
    }
    .wrap {
      height: auto;
      min-height: 100%;
      margin-bottom: -60px;
      overflow: auto;
    }
    .footer,
    .wrap .push {
      height: 60px;
      overflow: hidden;
    }
    .footer {
      clear: both;
    }

  

    

      显示/隐藏主体内容
      
这种 stick footer 的方式会增加一个多余的元素：即下面的div.push元素
      

        可以在这里添加一个超过视口高度的容器看看效果......
      
    
    

  
  

    
这里是footer
  

2. footer元素 负margin-top 版本

    body {
      font-size: 30px;
      line-height: 1.5;
    }

    html,
    body {
      height: 100%;
    }

    .wrap {
      height: auto;
      min-height: 100%;
      padding-bottom: 60px;
      overflow: auto;
    }

    .footer {
      position: relative;
      height: 60px;
      margin-top: -60px;
      overflow: hidden;
      clear: both;
    }

  

    

      显示/隐藏主体内容
      
footer元素 负margin-top 版本
      

        可以在这里添加一个超过视口高度的容器看看效果......
      
    
  
  

    
这里是footer
  

3. calc版本

    body {
      font-size: 30px;
      line-height: 1.5;
    }

    .wrap {
      min-height: calc(100vh - 60px);
      height: auto;
      overflow: auto;
    }

    .footer {
      position: relative;
      height: 60px;
      overflow: hidden;
      clear: both;
    }

  

    

      显示/隐藏主体内容
      
calc版本
      

        可以在这里添加一个超过视口高度的容器看看效果......
      
    
  
  

    
这里是footer
  

4. flex 版本

body {
      font-size: 30px;
      line-height: 1.5;
    }

    body,
    html {
      height: 100%;
    }

    .wrap {
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }

    .wrap .content {
      flex-grow: 1;
    }

    .wrap .footer {
      clear: both;
    }

    .color-ff7d7d {
      background-color: #ff7d7d;
    }

    .color-fbbb44 {
      background-color: #fbbb44;
    }

    .color-7db9a9 {
      background-color: #7db9a9;
    }

  
  

    

      显示/隐藏主体内容
      
flex 版本
      

        可以在这里添加一个超过视口高度的容器看看效果......
      
    
    

      
这里是footer
    
  

5. position: fixed 版本

/* 第一步设置盒子为满屏大小 */
    body {
      font-size: 30px;
      line-height: 2;
    }

    .wrap {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    /* 第二步子盒子设置最小高度且清除浮动 给一个padding-bottom 等于footer 避免内容被footer遮盖*/

    .wrap .content {
      min-height: 100%;
      padding-bottom: 100px;
    }

    /* 第三步footer的height和margin-top要相等 */

    .wrap .footer {
      position: relative;
      height: 100px;
      margin-top: -100px;
      clear: both;
    }

  

    

      显示/隐藏主体内容
      
position: fixed 版本
      

          可以在这里添加一个超过视口高度的容器看看效果......
      
    
    
这是footer区域