JS实现页面底部固定页脚：两种方法详解

在JavaScript中，可以使用以下两种方法将页脚移至页面的最底端：

1. 使用CSS的flexbox布局将页脚置于页面底部。

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

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

.content {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
}

2. 使用JavaScript将页脚移至页面底部。

window.addEventListener("DOMContentLoaded", function() {
  var footer = document.querySelector(".footer");
  var windowHeight = window.innerHeight;
  var bodyHeight = document.body.offsetHeight;
  
  if (bodyHeight < windowHeight) {
    footer.style.position = "fixed";
    footer.style.bottom = "0";
  }
});

这段代码会在文档加载完毕后执行。它首先获取页脚元素的引用，然后比较页面的实际高度和窗口的高度。如果页面的高度小于窗口的高度，表示内容不足以填满整个窗口，这时就可以将页脚置于页面底部。通过设置position: fixed;和bottom: 0;，将页脚固定在页面底部。

请注意，这只是其中一种实现方式，你也可以根据具体的需求进行调整和改进。