网站Footer无法显示，已排查HTML标签与CSS类仍未解决

直接给你一个最简可运行的代码示例，复制就能用，同时帮你排查几个常见的隐藏坑：

HTML 结构 #

<!-- 页面主体内容 -->
<div class="page-content">
  这里是你的页面内容区域
</div>

<!-- Footer 部分 -->
<footer class="site-footer">
  <p>这是页面底部的Footer内容</p>
</footer>

CSS 样式 #

/* 全局基础样式重置（可选但推荐） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让页面高度至少铺满视口 */
html, body {
  height: 100%;
}

/* 主体内容区域自动占满剩余空间 */
.page-content {
  min-height: 100%;
  padding-bottom: 60px; /* 这个值要等于Footer的高度，避免内容被Footer遮挡 */
}

/* Footer 固定在底部 */
.site-footer {
  height: 60px; /* 自定义Footer高度 */
  background-color: #f5f5f5;
  text-align: center;
  line-height: 60px;
  position: relative;
  margin-top: -60px; /* 负margin等于Footer高度，拉到页面底部 */
  width: 100%;
}

排查你之前的问题可能点 #

• 检查Footer元素是否被设置 display: none，或是被其他元素的 z-index 覆盖导致被遮挡
• 确认body/html元素有没有设置足够高度，否则Footer可能随内容流动，无法固定在视口底部
• 检查是否存在拼写错误的CSS类名，或是冲突的样式规则（比如误用position: absolute却未设置bottom: 0）

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