这问题我之前踩过好几次坑！核心原因是Chrome和Firefox在视口高度计算、滚动条空间占用上的逻辑差异，再加上可能没统一盒模型设置，导致固定高度的元素加起来后，在Firefox里超出了实际可用视口高度，触发了滚动条。给你几个实用的解决方案：

1. 先统一全局盒模型 #

浏览器默认的盒模型（content-box）会让内边距、边框额外增加元素尺寸，很容易出现高度计算偏差。先全局设置border-box，确保元素的高度/宽度包含内边距和边框：

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

2. 用Flexbox实现自适应布局（推荐） #

别再依赖固定高度相加来适配页面了，用Flexbox让内容区域自动填充剩余空间，完全适配不同浏览器的视口：

body {
  min-height: 100dvh; /* 用动态视口高度，自动排除滚动条占用空间 */
  display: flex;
  flex-direction: column;
}

.header {
  height: 100px;
}

.content {
  flex: 1; /* 自动填充Header和Footer之外的所有空间 */
  min-height: 462px; /* 保留你需要的最小高度 */
}

.footer {
  height: 100px;
}

这里用100dvh代替传统的100vh，它会根据浏览器是否显示滚动条自动调整视口高度，完美解决两款浏览器的差异。

3. 快速修复：隐藏横向滚动条（应急用） #

如果只是临时想去掉Firefox的滚动条，也可以给body添加横向溢出隐藏，避免滚动条占用空间影响高度计算：

body {
  overflow-x: hidden;
}

你之前的固定高度总和是100+462+100=662px，当Firefox显示滚动条时，实际可用视口高度会比662px小一点，自然就出现了滚动条。用上面的Flex方案就能彻底解决这类跨浏览器适配问题啦！

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