如何让页面Footer置于底部且滚动至页面底部才可见？

方法一：CSS + 少量JavaScript（推荐，兼容性好） #

该方案可完美匹配需求：内容不足一屏时，Footer固定在页面底部无空白；内容超过一屏时，Footer默认隐藏在视口外，滚动至底部时平滑显示。

步骤1：基础样式调整 #

通过Flex布局确保内容不足时页面占满视口，同时给主内容区预留Footer高度，避免内容被遮挡：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 避免padding影响元素宽度计算 */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* 让main自动填充header和footer之外的空间 */
}

header {
  background-color: gray;
  padding: 1rem;
}

main {
  flex: 1; /* 填充剩余空间，确保内容不足时Footer贴底 */
  padding: 1rem;
  padding-bottom: 40px; /* 预留Footer高度的两倍，防止滚动到底时内容被遮挡 */
}

footer {
  background-color: gray;
  height: 20px;
  width: 100%;
  position: fixed;
  bottom: -20px; /* 默认隐藏在视口下方 */
  transition: bottom 0.3s ease; /* 添加平滑过渡动画 */
  text-align: center;
}

步骤2：监听滚动事件控制Footer显示 #

通过JavaScript判断滚动位置，动态切换Footer的显示状态：

window.addEventListener('scroll', function() {
  // 计算当前滚动位置距离页面底部的剩余距离
  const scrollBottom = document.documentElement.scrollHeight - window.innerHeight - window.scrollY;
  const footer = document.querySelector('footer');
  
  // 距离底部≤20px时显示Footer，否则隐藏
  footer.style.bottom = scrollBottom <= 20 ? '0' : '-20px';
});

方法二：纯CSS方案（兼容性稍差） #

无需JavaScript，利用CSS新特性实现，但仅支持现代浏览器：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}

header {
  background-color: gray;
  padding: 1rem;
}

main {
  flex: 1;
  padding: 1rem;
}

footer {
  background-color: gray;
  height: 20px;
  width: 100%;
  position: sticky;
  bottom: 0;
  transform: translateY(100%); /* 默认隐藏 */
  transition: transform 0.3s ease;
  text-align: center;
}

/* 当Footer进入视口时显示 */
body:has(:last-child:is(footer):in-view) footer {
  transform: translateY(0);
}

注：has()和:in-view为CSS新特性，旧版浏览器不支持，优先推荐方法一。

完整测试代码 #

将样式和脚本整合到你的HTML中：

<!DOCTYPE html>
<html>
 <body>
  <header>Heading</header>
  <main>
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque ut.</p>
    <!-- 可添加更多内容测试长页面场景 -->
  </main>
  <footer>&copy; Copyright, Business</footer>

  <script>
    window.addEventListener('scroll', function() {
      const scrollBottom = document.documentElement.scrollHeight - window.innerHeight - window.scrollY;
      const footer = document.querySelector('footer');
      footer.style.bottom = scrollBottom <= 20 ? '0' : '-20px';
    });
  </script>
 </body>
</html>

内容的提问来源于stack exchange，提问作者haadi