Vue项目中Firefox页脚无法固定在底部的问题求助

嘿，这个问题我之前踩过坑！Firefox 在处理 min-height: 100% 时和 Chrome 有个关键差异——它要求父元素必须有明确的高度值，否则子元素的 min-height 不会正确生效。

你当前的代码只给 #app 设置了 min-height: 100%，但它的父元素（html 和 body）默认没有高度，Firefox 就无法正确计算 #app 的高度，导致 footer 没法固定在底部。

快速修复方案（基于你现有代码） #

给 html 和 body 加上高度设置，同时给 #app 加一个底部内边距，避免内容被 footer 遮挡：

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

#app {
  min-height: 100%;
  position: relative;
  box-sizing: border-box;
  padding-bottom: 5rem; /* 数值和 footer 的高度一致 */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5rem;
}

更现代的替代方案（推荐） #

用 Flexbox 布局实现固定 footer，这种方式在所有浏览器（包括 Firefox）里表现更稳定，还不用处理绝对定位的遮挡问题：

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

#app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* 给你的主内容容器加这个类，让它占满剩余空间 */
.main-content {
  flex: 1;
}

.footer {
  height: 5rem;
}

原理很简单：Flexbox 会让 main-content 自动填充 #app 的剩余空间，footer 自然就被挤到页面底部了，不管内容多少都能固定住。

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