本文介绍一种不依赖 vh 单位、兼容移动端的纯 CSS Flexbox 方案，通过正确设置 HTML/body 高度链与 flex 布局，使页脚始终贴底且自适应不同屏幕尺寸。
本文介绍一种不依赖 `vh` 单位、兼容移动端的纯 css flexbox 方案，通过正确设置 html/body 高度链与 flex 布局，使页脚始终贴底且自适应不同屏幕尺寸。
在 React 应用中实现“粘性页脚”（Sticky Footer）时，许多开发者习惯使用 100vh 设置容器高度。但 vh 在移动端（尤其 Safari iOS）易因地址栏缩放导致布局错乱，且固定视口高度无法适配动态内容或键盘弹出等场景。因此，基于百分比的流式高度链 + Flexbox 弹性分配才是更健壮、响应式的解决方案。
✅ 正确的高度继承链是关键
必须确保高度从 html → body → 根容器（如 .App）逐级传递，且全部设为 height: 100%（而非 min-height），否则 % 单位将失效（因为百分比需相对于有明确高度的父容器计算）：
/* styles/App.scss */
* {
margin: 0;
padding: 0;
}
html {
height: 100%; /* 必须设置，为 % 提供基准 */
background-color: #eee;
}
body {
height: 100%; /* 继承 html 高度 */
display: flex;
flex-direction: column;
}
.App {
flex: 1; /* 占满剩余空间（等价于 flex: 1 0 auto）*/
display: flex;
flex-direction: column;
}⚠️ 注意：原代码中 .App { min-height: 100% } 是无效的——min-height 不会触发子元素对 % 的计算基准；必须用 height: 100% 配合 flex: 1 实现弹性伸展。
✅ React 组件结构需语义化包裹
将 <Navigation>、<Showcase> 和 <Footer> 封装在语义化容器中（如 <main> 和 <footer>），并确保根容器类名与 CSS 选择器一致：
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
// App.js
import "./styles/App.scss";
import Navigation from "./components/Navigation/Navigation";
import Showcase from "./components/Showcase/Showcase";
import Footer from "./components/Footer/Footer";
const App = () => (
<div className="App">
<Navigation />
<main className="main-content">
<Showcase />
</main>
<Footer />
</div>
);
export default App;对应 CSS 中为 <main> 设置 flex: 1，使其撑开剩余空间，从而将页脚“推”至底部：
/* styles/App.scss （续）*/
.main-content {
flex: 1; /* 关键：占据所有可用高度 */
/* 可选：防止内容溢出 */
overflow-y: auto;
}
.Footer {
/* 不设 height，用 flex 自然贴底 */
/* 若需固定高度，建议用 rem/em 或 max-height，避免 vh */
padding: 1.5rem 0;
background: #333;
color: white;
text-align: center;
}✅ 移动端友好实践建议
- 避免 vh 与 position: fixed 混用：Safari 在滚动时会重算 vh，导致页脚跳动；
- 页脚高度用 rem 或 em：例如 height: 4rem，比像素值更易缩放；
-
启用 viewport 元标签：确保移动端正确解析高度单位
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
✅ 最终效果验证
当页面内容较少时，页脚自动沉底；内容增多时，页脚随内容自然下移——完全符合“粘性”定义，且无 JS 干预、零 vh 依赖、全设备兼容。
总结：实现百分比驱动的粘性页脚，核心在于 html → body → .App 的 height: 100% 链路 + 根容器 display: flex + 主内容区 flex: 1。这一模式天然适配 React 组件化结构，无需额外库或 JavaScript 计算，是现代前端开发中推荐的标准实践。
