如何在内容垂直对齐时固定页脚

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

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

.container {
  min-height: 100%;
  position: relative;
}

.content {
  padding-bottom: 50px; /* 页脚高度 */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px; /* 页脚高度 */
}