紧贴底部的页脚

html：

    
title


    
abcdefg
 


    
2018 xxxx
    
这里是页脚

法一：

main {
  min-height: calc(100vh - 页头高度 - 页脚高度);
  box-sizing: border-box;
} 

或者法二：
把header和main用一个容器包起来

#wrapper {
  min-height: calc(100vh - 页脚高度);
}

√ 法三：

body {
  display: flex;
  flex-direction: column;  // 纵向排列
  min-height: 100vh;
}
main {
  flex:1;
}

ps: 这个flex属性 是 flex-grow、flex-shrink 和 flex-basis 的简写语法；任何元素只要设置了一个大于0的flex，就获得 可伸缩 的特性； flex的值负责控制多个可伸缩元素之间的尺寸分配比例。