CSS适配问题：小屏幕尺寸下页脚无法固定在页面底部

核心修复逻辑：放弃硬编码高度差计算、绝对定位脱离文档流的写法，改用全局垂直Flex布局实现页脚自动贴底，不依赖固定的页脚高度值，天然适配小屏尺寸

原有方案失效的原因 #

• 原代码靠calc(100vh - 75px - 105px)计算主体的最小高度，本质是拍脑袋预设了页脚固定105px高，但小屏下页脚的文字、导航一折行，实际高度可能到200px甚至更高，高度算不准，自然把页脚挤在页面中间，贴不到底
• 之前试的绝对定位固定页脚，会让页脚脱离正常文档流，小屏内容多的时候页脚直接盖在正文上面，还得手动给正文加和页脚一样高的下内边距，改一次页脚高度就得跟着改一次正文，完全是重复劳动
• 之前给html加固定height的操作，没有打通从根元素到页脚的弹性布局链路，相当于只给最外层套了个壳，里面的元素还是按原来的流式布局走，当然不会有任何效果

修正后的完整CSS代码 #

1. 根元素与全局基础样式 #

html {
  margin: 0;
  padding: 0;
  /* 撑满视口高度，作为弹性布局的计算基准 */
  height: 100%;
  /* 统一盒模型，避免padding导致宽度溢出 */
  box-sizing: border-box;
}

2. 全局布局容器（body） #

body {
  margin: 0;
  padding: 0;
  background: #313535;
  font-family: Roboto, sans-serif;
  /* 撑满根元素高度 */
  min-height: 100%;
  /* 核心改动：将body设置为垂直方向的弹性容器，串联整个页面的布局链路 */
  display: flex;
  flex-direction: column;
}

3. 主体内容区块（.main） #

.main {
  display: flex;
  padding: 50px 50px;
  justify-content: center;
  align-items: center;
  /* 核心改动：移除原硬编码calc高度，让主体区块自动占据除页脚外的所有剩余空间 */
  flex: 1 0 auto;
  box-sizing: border-box;
}

4. 页脚区块（.site-footer） #

.site-footer {
  background: #202323;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 50px;
  width: 100%;
  box-sizing: border-box;
  /* 核心改动：让页脚保持自身内容高度，不被弹性布局压缩，自动停靠在容器最底端 */
  flex-shrink: 0;
  /* 移除原硬编码的min-width: 390px，避免小屏下产生超出视口的横向滚动条 */
}

小屏幕适配补充配置 #

小屏场景下页脚横向排列容易出现内容挤压，可补充媒体查询优化适配效果，不需要硬设置最小宽度：

@media (max-width: 768px) {
  .site-footer {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    text-align: center;
  }
  .main {
    padding: 20px;
    /* 小屏下主体内容左对齐，避免多列布局被居中挤压 */
    align-items: flex-start;
  }
}

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