紧贴底部的页脚

html：

<header>
    <h1>title</h1>
</header>
<main>
    <p>abcdefg</p> 
</main>
<footer>
    <p>2018 xxxx</p>
    <p>这里是页脚</p>
</footer>

法一：

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的值负责控制多个可伸缩元素之间的尺寸分配比例。