stick footer 布局

flex方案

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      /* 这里为了方便演示，实际情况下要考虑移动端输入键盘压缩的情况 */
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .main {
      flex: 1;
      background: greenyellow;
    }
    .footer {
      background: #ccc;
    }
</style>
<div class="container">
    <div class="main"></div>
    <div class="footer">footer</div>
</div>

最好的方案

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      min-height: 100vh;
      box-sizing: border-box;
      padding-bottom: 50px;
    }
    .footer {
      position: relative;
      width: 100%;
      margin-top: -50px;
    }
</style>
<div class="container">
    <div class="main"></div>
    <div class="footer">footer</div>
</div>