推荐阅读 https://blog.csdn.net/weixin_46221198/article/details/107564706

推荐使用：

1. 利用 calc() 计算

整体思路：
将页面分为内容和页脚两个盒子，利用ccs3新增 calc() 计算函数，计算出内容盒子大小，这样两个盒子就不会重叠了。

  1. <style>
  2.   .content {
  3.      min-height: calc(100vh - 50px);
  4.   }
  5.   .footer {
  6.     height: 50px;
  7.   }
  8. </style>
  9. <body>
  10.   <div class="content">
  11.     content
  12.   </div>
  13.   <footer class="footer"></footer>
  14. </body>

2. flex布局

以上三种方法的footer高度都是固定的，通常来说这不利于网页布局：内容会改变，它们都是弹性的，一旦内容超出固定高度就会破坏布局。所以给footer使用flexbox吧，让它的高度可以变大变小变漂亮~（≧∇≦）

  1. <style>
  2.   html {
  3.     height: 100%;
  4.   }
  5.   body {
  6.     min-height: 100%;
  7.     display: flex;
  8.     flex-direction: column;
  9.   }
  10.   .content {
  11.     flex: 1;
  12.   }
  13. </style>
  14. <body>
  15.   <div class="content">
  16.     content
  17.   </div>
  18.   <footer class="footer"></footer>
  19. </body>

grid网格布局

grid比flexbox还要新很多，并且更佳很简洁。
遗憾的是，网格布局（Grid layout）目前仅支持Chrome Canary和Firefox Developer Edition版本。

  1. <style>
  2.   html {
  3.     height: 100%;
  4.   }
  5.   body {
  6.     min-height: 100%;
  7.     display: grid;
  8.     grid-template-rows: 1fr auto;
  9.   }
  10.   .footer {
  11.     grid-row-start: 2;
  12.     grid-row-end: 3;
  13.   }
  14. </style>
  15. <body>
  16.   <div class="content">
  17.     content
  18.   </div>
  19.   <footer class="footer"></footer>
  20. </body>