如何修复响应式页面底部的页脚？

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保容器铺满整个视口 */
}

.content {
  flex: 1 0 auto; /* 可变伸缩项，填充剩余空间 */
}

.footer {
  flex: 0 0 auto; /* 固定高度，不参与伸缩 */
}

window.addEventListener("load", function() {
  var contentHeight = document.querySelector(".content").offsetHeight;
  var viewportHeight = window.innerHeight;

  if (contentHeight < viewportHeight) {
    document.querySelector(".footer").style.position = "fixed";
    document.querySelector(".footer").style.bottom = "0";
  }
});