如何实现页脚固定在任意尺寸屏幕底部无需滚动查看

你的代码不生效核心是三个问题：

• 样式存在语法错误：末尾多了一个多余的闭合大括号，同时定义了从未使用的.footer类规则，和实际DOM用的.site-footer样式冲突
• DOM结构和样式不匹配：你写了.page-wrap相关的粘性页脚规则，但页面内容根本没有用这个类的容器包裹，规则完全不生效
• 方案混用：同时写了position: fixed固定定位和负margin粘性页脚两套逻辑，互相冲突导致样式异常

要实现页脚始终固定在视口底部、无需滚动即可见的效果，直接用固定定位方案即可，步骤如下：

• 先清除浏览器默认边距，用box-sizing: border-box统一盒模型计算规则，避免宽高计算错位
• 给body设置和页脚总高度相等的底部内边距，避免页面内容被固定在底部的页脚遮挡
• 清理所有冗余冲突样式，给.site-footer设置正确的固定定位属性，固定在视口底部
• 给页脚加不透明背景，避免滚动时内容和页脚叠透影响显示

<html>
<body>
<!-- 所有页面内容放在footer标签之前即可 -->
<br><br>
<p>测试内容，无论内容多少，页脚都会固定在视口底部</p>

<footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI©</footer>

<style>
/* 全局重置默认样式，避免浏览器默认边距错位 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 预留页脚位置，防止内容被页脚遮挡，总高度和页脚一致 */
body {
  padding-bottom: 60px;
}
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-top: 1px solid black;
  padding: 10px 0;
  background: #ffffff;
}
</style>
</body>
</html>

如果你需要的是「内容不足一屏时页脚贴视口底部，内容超过一屏时页脚在页面最末尾、滚动到最底部才能看到」的粘性效果，不用固定定位，改用flex布局即可，替换对应样式：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 给内容区域的外层容器加这个属性，没有外层容器可以直接给main标签加 */
.content-wrap {
  flex: 1;
}
.site-footer {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-top: 1px solid black;
  padding: 10px 0;
}

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