页脚不会停留在页面底部

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

.footer {
  flex-shrink: 0;
}

<div class="container">
  <div class="content">
    <!-- 页面主要内容 -->
  </div>
  <footer class="footer">
    <!-- 页脚内容 -->
  </footer>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

.content {
  grid-row: 1 / -1;
}

.footer {
  grid-row: 2;
}

<div class="container">
  <div class="content">
    <!-- 页面主要内容 -->
  </div>
  <footer class="footer">
    <!-- 页脚内容 -->
  </footer>
</div>